gob3

Running

App Files Files Community

gob3 / index.html

madansa7

Update index.html

aa164f2 verified 10 months ago

raw

history blame contribute delete

44.9 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Global Outsource Bureau - Accounting & Taxation Solutions</title>
	<!-- Tailwind CSS CDN -->
	<script src="https://cdn.tailwindcss.com"></script>
	<!-- Google Fonts - Inter -->
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<!-- Font Awesome for Icons -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<style>
	body {
	font-family: 'Inter', sans-serif;
	color: #333;
	background-color: #f8f9fa;
	}
	/* Custom scrollbar for better aesthetics */
	::-webkit-scrollbar {
	width: 8px;
	}
	::-webkit-scrollbar-track {
	background: #e2e8f0;
	border-radius: 10px;
	}
	::-webkit-scrollbar-thumb {
	background: #1e3a8a;
	border-radius: 10px;
	}
	::-webkit-scrollbar-thumb:hover {
	background: #1a202c;
	}
	.container {
	max-width: 1200px;
	}
	.section-hidden {
	display: none;
	}
	/* Custom styles for flag selector to ensure consistent sizing */
	.flag-icon {
	width: 24px; /* Adjust as needed */
	height: 24px; /* Adjust as needed */
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}
	.active-flag {
	border: 2px solid #1e3a8a; /* Dark blue border for active flag */
	}
	</style>
	</head>
	<body class="overflow-x-hidden">
	<!-- Header -->
	<header class="bg-white shadow-lg py-4 fixed top-0 left-0 w-full z-50 rounded-b-lg">
	<div class="container mx-auto flex justify-between items-center px-4 sm:px-6 lg:px-8">
	<!-- Logo -->
	<div class="flex items-center space-x-2">
	<img src="https://placehold.co/40x40/000000/FFFFFF?text=Logo" alt="Global Outsource Bureau Logo" class="w-10 h-10 rounded-full">
	<span class="text-2xl font-bold text-gray-800">Global Outsource Bureau</span>
	</div>

	<!-- Navigation -->
	<nav class="hidden md:flex space-x-6 lg:space-x-8">
	<a href="#home" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">Home</a>
	<a href="#about" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">About Us</a>
	<a href="#services" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">Services</a>
	<a href="#engagement" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">Engagement Model</a>
	<a href="#resources" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">Resources</a>
	<a href="#contact" class="text-gray-600 hover:text-blue-700 font-medium transition-colors duration-300 rounded-md py-2 px-3">Contact Us</a>
	</nav>

	<!-- Flag Selector -->
	<div class="flex items-center space-x-3">
	<img src="https://flagcdn.com/gb.svg" alt="UK Flag" class="flag-icon cursor-pointer border-2 border-transparent active-flag" data-country="uk" title="United Kingdom">
	<img src="https://flagcdn.com/ie.svg" alt="Ireland Flag" class="flag-icon cursor-pointer border-2 border-transparent" data-country="ie" title="Ireland">
	<img src="https://flagcdn.com/us.svg" alt="US Flag" class="flag-icon cursor-pointer border-2 border-transparent" data-country="us" title="United States">
	<!-- Mobile Menu Button -->
	<button id="mobile-menu-button" class="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
	<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
	</svg>
	</button>
	</div>
	</div>

	<!-- Mobile Menu -->
	<div id="mobile-menu" class="hidden md:hidden bg-white px-4 pt-2 pb-4 space-y-1 rounded-b-lg">
	<a href="#home" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">Home</a>
	<a href="#about" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">About Us</a>
	<a href="#services" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">Services</a>
	<a href="#engagement" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">Engagement Model</a>
	<a href="#resources" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">Resources</a>
	<a href="#contact" class="block py-2 px-3 text-base text-gray-700 hover:bg-gray-50 rounded-md transition-colors duration-300">Contact Us</a>
	</div>
	</header>

	<main class="pt-20"> <!-- Padding to account for fixed header -->

	<!-- Home Section -->
	<section id="home" class="section-content bg-gradient-to-r from-blue-700 to-indigo-900 text-white py-20 md:py-32 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-4">
	<div class="container mx-auto text-center px-4">
	<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6" data-content="home-title">
	Empowering <span class="country-name">UK</span> Businesses: Cut Costs by 50%+ with Expert Outsourcing
	</h1>
	<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto" data-content="home-subtitle">
	Achieve unparalleled cost savings, guaranteed quality, and complete certainty with Global Outsource Bureau's professional accounting and taxation solutions.
	</p>
	<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
	<a href="#contact" class="bg-yellow-400 hover:bg-yellow-500 text-blue-900 font-bold py-3 px-8 rounded-full shadow-lg transition-transform transform hover:scale-105 duration-300">
	Claim Your Free Trial
	</a>
	<a href="#services" class="bg-white hover:bg-gray-100 text-blue-800 font-bold py-3 px-8 rounded-full shadow-lg transition-transform transform hover:scale-105 duration-300">
	Explore Our Services
	</a>
	</div>
	</div>
	</section>

	<!-- About Us Section -->
	<section id="about" class="section-content bg-white py-16 md:py-24 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-8">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">About <span class="text-blue-700">Global Outsource Bureau</span></h2>
	<div class="grid md:grid-cols-2 gap-12 items-center">
	<div>
	<p class="text-lg text-gray-700 leading-relaxed mb-6">
	At Global Outsource Bureau, we are dedicated to transforming your accounting and taxation challenges into opportunities for growth and efficiency. With a robust team of highly skilled professionals, including <strong class="text-blue-700">ACCA qualified accountants</strong> and experienced <strong class="text-blue-700">Indian Chartered Accountants (CAs)</strong>, we bring a blend of global expertise and local understanding to your business.
	</p>
	<p class="text-lg text-gray-700 leading-relaxed mb-6">
	Our unique outsourcing model leverages this rich talent pool, enabling businesses like yours to significantly reduce operational costs by over 50% without compromising on quality or compliance. We pride ourselves on delivering accurate, timely, and secure financial solutions, ensuring peace of mind and allowing you to focus on your core business activities.
	</p>
	<p class="text-lg text-gray-700 leading-relaxed">
	We are committed to a client-centric approach, building long-term partnerships based on trust, transparency, and tailored solutions. Your success is our priority.
	</p>
	</div>
	<div class="flex justify-center">
	<img src="https://placehold.co/600x400/3B82F6/FFFFFF?text=Our+Expert+Team" alt="Our Expert Team" class="rounded-lg shadow-lg max-w-full h-auto">
	</div>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<section id="services" class="section-content bg-gray-50 py-16 md:py-24 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-8">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Our <span class="text-blue-700">Comprehensive Services</span></h2>
	<div class="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

	<!-- Service Card 1 -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-book"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center" data-content="service-bookkeeping-title">Bookkeeping & VAT Returns (<span class="country-vat-name">UK</span>)</h3>
	<p class="text-gray-600 text-center" data-content="service-bookkeeping-description">
	Accurate and timely recording of all financial transactions, ensuring your accounts are always up-to-date and ready for tax submissions. Specialised in <span class="country-vat-name">UK</span> VAT regulations.
	</p>
	</div>

	<!-- Service Card 2 -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-file-invoice-dollar"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center" data-content="service-tax-title">Self-Assessment Tax Returns (<span class="country-tax-name">UK</span>)</h3>
	<p class="text-gray-600 text-center" data-content="service-tax-description">
	Expert preparation and submission of individual tax returns, maximizing allowances and ensuring full compliance with <span class="country-tax-name">UK</span> tax laws.
	</p>
	</div>

	<!-- Service Card 3 -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-chart-line"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center" data-content="service-ye-title">Year-End Accounts & CT Returns (<span class="country-ct-name">UK</span>)</h3>
	<p class="text-gray-600 text-center" data-content="service-ye-description">
	Comprehensive year-end accounts preparation and corporation tax return filing for businesses of all sizes, adhering to <span class="country-ct-name">UK</span> financial reporting standards.
	</p>
	</div>

	<!-- Service Card 4 -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-landmark"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center">Company Secretarial</h3>
	<p class="text-gray-600 text-center">
	Ensuring your company adheres to all statutory requirements, including Companies House filings, board meeting minutes, and shareholder registers.
	</p>
	</div>

	<!-- Service Card 5 -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-users-gear"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center">Payroll Services</h3>
	<p class="text-gray-600 text-center">
	Accurate and efficient payroll processing, including calculations, payslip generation, and submission to relevant tax authorities.
	</p>
	</div>

	<!-- Service Card 6 (Example of potential additional service) -->
	<div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
	<div class="text-blue-600 text-4xl mb-4 text-center"><i class="fas fa-handshake"></i></div>
	<h3 class="text-2xl font-semibold text-gray-800 mb-3 text-center">Advisory & Consultancy</h3>
	<p class="text-gray-600 text-center">
	Strategic financial advice to help your business grow, optimize tax efficiency, and navigate complex financial landscapes.
	</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Engagement Model Section -->
	<section id="engagement" class="section-content bg-white py-16 md:py-24 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-8">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Our Flexible <span class="text-blue-700">Engagement Models</span></h2>
	<div class="grid md:grid-cols-2 gap-12">
	<div class="bg-blue-50 p-8 rounded-lg shadow-md">
	<h3 class="text-3xl font-semibold text-blue-800 mb-4 flex items-center"><i class="fas fa-users mr-3 text-blue-600"></i>Dedicated Team Model</h3>
	<p class="text-gray-700 leading-relaxed mb-4">
	Ideal for businesses seeking a highly integrated and long-term partnership. We provide you with a dedicated team of accountants who work exclusively on your projects, functioning as an extension of your in-house team. This model offers maximum control, deep understanding of your operations, and consistent communication.
	</p>
	<ul class="list-disc list-inside text-gray-600 space-y-2">
	<li>Seamless integration with your existing workflows.</li>
	<li>Personalized service with dedicated points of contact.</li>
	<li>Scalable resources to match your evolving needs.</li>
	<li>Enhanced data security and confidentiality.</li>
	</ul>
	</div>
	<div class="bg-green-50 p-8 rounded-lg shadow-md">
	<h3 class="text-3xl font-semibold text-green-800 mb-4 flex items-center"><i class="fas fa-handshake-angle mr-3 text-green-600"></i>Project-Based Model</h3>
	<p class="text-gray-700 leading-relaxed mb-4">
	Perfect for specific, short-term accounting tasks or one-off projects. Whether it's a year-end accounts preparation, a complex tax return, or a specific audit support, our project-based model provides flexible expertise without long-term commitments.
	</p>
	<ul class="list-disc list-inside text-gray-600 space-y-2">
	<li>Cost-effective for defined scope projects.</li>
	<li>Quick turnaround times for urgent tasks.</li>
	<li>Access to specialized skills on demand.</li>
	<li>Clear deliverables and upfront pricing.</li>
	</ul>
	</div>
	</div>
	<div class="mt-12 text-center">
	<p class="text-xl text-gray-700 mb-6">Not sure which model suits you best? <br class="md:hidden">Contact us for a personalized consultation!</p>
	<a href="#contact" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-transform transform hover:scale-105 duration-300">
	Discuss Your Needs
	</a>
	</div>
	</div>
	</section>

	<!-- Resources Section -->
	<section id="resources" class="section-content bg-gray-50 py-16 md:py-24 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-8">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Our <span class="text-blue-700">Resources</span></h2>

	<!-- Tabs for Blog, Video Gallery, Pricing Calculator -->
	<div class="flex justify-center mb-10">
	<button class="resource-tab active-tab bg-blue-700 text-white py-3 px-6 rounded-l-lg font-semibold shadow-md hover:bg-blue-800 transition-colors duration-300" data-target="blog-content">Blog</button>
	<button class="resource-tab bg-gray-200 text-gray-700 py-3 px-6 font-semibold shadow-md hover:bg-gray-300 transition-colors duration-300" data-target="video-gallery-content">Video Gallery</button>
	<button class="resource-tab bg-gray-200 text-gray-700 py-3 px-6 rounded-r-lg font-semibold shadow-md hover:bg-gray-300 transition-colors duration-300" data-target="pricing-calculator-content">Pricing Calculator</button>
	</div>

	<!-- Blog Content -->
	<div id="blog-content" class="resource-content p-8 bg-white rounded-lg shadow-md">
	<h3 class="text-3xl font-semibold text-gray-800 mb-6">Latest Insights from Our Blog</h3>
	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Blog Post 1 -->
	<div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
	<img src="https://placehold.co/400x250/FCA5A5/FFFFFF?text=Blog+Post+1" alt="Blog Post Image" class="w-full h-48 object-cover">
	<div class="p-5">
	<h4 class="text-xl font-bold text-gray-800 mb-2">The Future of Outsourced Accounting in 2025</h4>
	<p class="text-gray-600 mb-4 text-sm">Discover key trends shaping the accounting outsourcing industry and how to leverage them for your business.</p>
	<a href="#" class="text-blue-700 hover:underline font-medium">Read More →</a>
	</div>
	</div>
	<!-- Blog Post 2 -->
	<div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
	<img src="https://placehold.co/400x250/A78BFA/FFFFFF?text=Blog+Post+2" alt="Blog Post Image" class="w-full h-48 object-cover">
	<div class="p-5">
	<h4 class="text-xl font-bold text-gray-800 mb-2">GDPR Compliance for Small Businesses: A Practical Guide</h4>
	<p class="text-gray-600 mb-4 text-sm">Understand the essentials of GDPR and how Global Outsource Bureau ensures data security.</p>
	<a href="#" class="text-blue-700 hover:underline font-medium">Read More →</a>
	</div>
	</div>
	<!-- Blog Post 3 -->
	<div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
	<img src="https://placehold.co/400x250/FDBA74/FFFFFF?text=Blog+Post+3" alt="Blog Post Image" class="w-full h-48 object-cover">
	<div class="p-5">
	<h4 class="text-xl font-bold text-gray-800 mb-2">Maximizing Tax Savings: Tips for <span class="country-tax-name">UK</span> Businesses</h4>
	<p class="text-gray-600 mb-4 text-sm" data-content="blog-tax-description">
	Expert advice on navigating the <span class="country-tax-name">UK</span> tax landscape to reduce your liabilities legally and efficiently.
	</p>
	<a href="#" class="text-blue-700 hover:underline font-medium">Read More →</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Video Gallery Content -->
	<div id="video-gallery-content" class="resource-content section-hidden p-8 bg-white rounded-lg shadow-md">
	<h3 class="text-3xl font-semibold text-gray-800 mb-6">Watch Our Explainer Videos</h3>
	<div class="grid md:grid-cols-2 gap-8">
	<!-- Video 1 -->
	<div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md">
	<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	<!-- Video 2 -->
	<div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md">
	<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/q_mY7wYj15M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	</div>
	<p class="text-center text-gray-600 mt-8">
	Note: These are placeholder videos. Please replace with your actual video content.
	</p>
	</div>

	<!-- Pricing Calculator Content -->
	<div id="pricing-calculator-content" class="resource-content section-hidden p-8 bg-white rounded-lg shadow-md">
	<h3 class="text-3xl font-semibold text-gray-800 mb-6">Calculate Your Potential Savings</h3>
	<p class="text-gray-700 mb-6">
	Use our simple calculator to estimate your potential cost savings by outsourcing your accounting and taxation needs to Global Outsource Bureau.
	</p>

	<div class="max-w-xl mx-auto bg-gray-100 p-8 rounded-lg shadow-inner">
	<div class="mb-6">
	<label for="current-cost" class="block text-gray-700 text-lg font-medium mb-2">Current Monthly Accounting Spend (<span class="currency-symbol">£</span>)</label>
	<input type="number" id="current-cost" placeholder="e.g., 2000" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
	</div>
	<div class="mb-6">
	<label for="hours-per-month" class="block text-gray-700 text-lg font-medium mb-2">Estimated Hours Per Month for Accounting</label>
	<input type="number" id="hours-per-month" placeholder="e.g., 40" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
	</div>
	<button id="calculate-savings" class="w-full bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-300">
	Calculate Savings
	</button>

	<div id="savings-result" class="mt-8 p-6 bg-blue-100 text-blue-900 border border-blue-200 rounded-lg text-center hidden">
	<h4 class="text-2xl font-bold mb-3">Estimated Annual Savings:</h4>
	<p class="text-4xl font-extrabold" data-content="savings-output-amount">
	<span class="currency-symbol">£</span><span id="calculated-amount">0</span>
	</p>
	<p class="text-lg mt-3">
	This is an estimate. <br>Get a precise quote with a <a href="#contact" class="underline text-blue-700 hover:text-blue-900">free consultation!</a>
	</p>
	</div>
	</div>
	<p class="text-center text-gray-600 mt-6">
	Disclaimer: This calculator provides an estimation. Actual savings may vary based on specific service requirements and engagement model.
	</p>
	</div>
	</div>
	</section>

	<!-- Contact Us Section -->
	<section id="contact" class="section-content bg-white py-16 md:py-24 rounded-lg shadow-xl mx-4 sm:mx-6 lg:mx-8 mt-8 mb-8">
	<div class="container mx-auto px-4">
	<h2 class="text-4xl font-bold text-center text-gray-800 mb-12">Get in <span class="text-blue-700">Touch</span></h2>
	<div class="grid md:grid-cols-2 gap-12">
	<!-- Contact Form -->
	<div>
	<h3 class="text-3xl font-semibold text-gray-800 mb-6">Send Us a Message</h3>
	<p class="text-gray-700 mb-6">
	Have questions or ready to claim your <strong class="text-blue-700">Free Trial</strong>? Fill out the form below, and we'll get back to you promptly.
	</p>
	<form class="space-y-6">
	<div>
	<label for="name" class="block text-gray-700 text-sm font-bold mb-2">Your Name</label>
	<input type="text" id="name" name="name" placeholder="John Doe" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" required>
	</div>
	<div>
	<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Your Email</label>
	<input type="email" id="email" name="email" placeholder="john.doe@example.com" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" required>
	</div>
	<div>
	<label for="phone" class="block text-gray-700 text-sm font-bold mb-2">Phone Number (Optional)</label>
	<input type="tel" id="phone" name="phone" placeholder="+44 1234 567890" class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
	</div>
	<div>
	<label for="message" class="block text-gray-700 text-sm font-bold mb-2">Your Message</label>
	<textarea id="message" name="message" rows="5" placeholder="Tell us about your accounting needs..." class="w-full p-3 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200" required></textarea>
	</div>
	<button type="submit" class="w-full bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-transform transform hover:scale-105 duration-300">
	Send Message
	</button>
	</form>
	<p id="form-message" class="mt-4 text-center text-sm hidden"></p>
	</div>

	<!-- Contact Details & Offices -->
	<div>
	<h3 class="text-3xl font-semibold text-gray-800 mb-6">Our Offices</h3>

	<!-- UK Office -->
	<div class="bg-blue-50 p-6 rounded-lg shadow-md mb-6">
	<h4 class="text-2xl font-semibold text-blue-800 mb-3 flex items-center"><i class="fas fa-location-dot mr-3 text-blue-600"></i>UK Office</h4>
	<p class="text-gray-700 mb-2">123 Business Park Road,</p>
	<p class="text-gray-700 mb-2">London, SW1A 0AA,</p>
	<p class="text-gray-700 mb-4">United Kingdom</p>
	<p class="text-gray-700 mb-2"><i class="fas fa-phone mr-2 text-blue-600"></i><a href="tel:+441234567890" class="hover:underline">+44 1234 567890</a></p>
	<p class="text-gray-700"><i class="fas fa-envelope mr-2 text-blue-600"></i><a href="mailto:info@globaloutsourcebureau.com" class="hover:underline">info@globaloutsourcebureau.com</a></p>
	</div>

	<!-- India Office -->
	<div class="bg-blue-50 p-6 rounded-lg shadow-md">
	<h4 class="text-2xl font-semibold text-blue-800 mb-3 flex items-center"><i class="fas fa-location-dot mr-3 text-blue-600"></i>India Office</h4>
	<p class="text-gray-700 mb-2">456 GlobaNagar,</p>
	<p class="text-gray-700 mb-2">Prahalad , Ahmedabad, Gujarat 380015,</p>
	<p class="text-gray-700 mb-4">India</p>
	<p class="text-gray-700 mb-2"><i class="fas fa-phone mr-2 text-blue-600"></i><a href="tel:+919876543210" class="hover:underline">+91 98765 43210</a></p>
	<p class="text-gray-700"><i class="fas fa-envelope mr-2 text-blue-600"></i><a href="mailto:info@globaloutsourcebureau.com" class="hover:underline">info@globaloutsourcebureau.com</a></p>
	</div>

	<div class="mt-8 text-center bg-gray-100 p-6 rounded-lg shadow-inner">
	<p class="text-xl text-gray-700 font-semibold mb-4">Your Data Security is Our Priority.</p>
	<p class="text-md text-gray-600">We are fully <strong class="text-blue-700">GDPR Compliant</strong>, ensuring the highest standards of data protection for all our clients.</p>
	<a href="#" class="text-blue-700 hover:underline text-sm mt-2 block">Read our Privacy Policy</a>
	</div>
	</div>
	</div>
	</div>
	</section>

	</main>

	<!-- Footer -->
	<footer class="bg-gray-800 text-white py-10 rounded-t-lg">
	<div class="container mx-auto px-4 text-center">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
	<div>
	<h4 class="text-xl font-bold mb-4">Global Outsource Bureau</h4>
	<p class="text-gray-400">Your trusted partner for outsourced accounting and taxation solutions.</p>
	</div>
	<div>
	<h4 class="text-xl font-bold mb-4">Quick Links</h4>
	<ul class="space-y-2">
	<li><a href="#home" class="text-gray-400 hover:text-white transition-colors duration-200">Home</a></li>
	<li><a href="#about" class="text-gray-400 hover:text-white transition-colors duration-200">About Us</a></li>
	<li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-200">Services</a></li>
	<li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-200">Contact Us</a></li>
	</ul>
	</div>
	<div>
	<h4 class="text-xl font-bold mb-4">Follow Us</h4>
	<div class="flex justify-center space-x-4">
	<a href="#" class="text-gray-400 hover:text-white text-2xl transition-colors duration-200"><i class="fab fa-linkedin"></i></a>
	<a href="#" class="text-gray-400 hover:text-white text-2xl transition-colors duration-200"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-white text-2xl transition-colors duration-200"><i class="fab fa-facebook"></i></a>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-700 pt-8 text-gray-400 text-sm">
	© <span id="current-year"></span> Global Outsource Bureau. All rights reserved.
	</div>
	</div>
	</footer>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Set current year in footer
	document.getElementById('current-year').textContent = new Date().getFullYear();

	// Smooth scrolling for navigation links
	document.querySelectorAll('nav a').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	// Close mobile menu if open
	document.getElementById('mobile-menu').classList.add('hidden');
	});
	});

	// Mobile menu toggle
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const mobileMenu = document.getElementById('mobile-menu');
	mobileMenuButton.addEventListener('click', () => {
	mobileMenu.classList.toggle('hidden');
	});

	// Data for country-specific content
	const countryContent = {
	uk: {
	homeTitle: 'Empowering UK Businesses: Cut Costs by 50%+ with Expert Outsourcing',
	homeSubtitle: 'Achieve unparalleled cost savings, guaranteed quality, and complete certainty with Global Outsource Bureau\'s professional accounting and taxation solutions.',
	vatName: 'UK',
	taxName: 'UK',
	ctName: 'UK',
	currencySymbol: '£',
	blogTaxDescription: 'Expert advice on navigating the UK tax landscape to reduce your liabilities legally and efficiently.'
	},
	ie: {
	homeTitle: 'Empowering Irish Businesses: Cut Costs by 50%+ with Expert Outsourcing',
	homeSubtitle: 'Achieve unparalleled cost savings, guaranteed quality, and complete certainty with Global Outsource Bureau\'s professional accounting and taxation solutions tailored for Ireland.',
	vatName: 'Irish',
	taxName: 'Irish',
	ctName: 'Irish',
	currencySymbol: '€',
	blogTaxDescription: 'Expert advice on navigating the Irish tax landscape to reduce your liabilities legally and efficiently.'
	},
	us: {
	homeTitle: 'Empowering US Businesses: Cut Costs by 50%+ with Expert Outsourcing',
	homeSubtitle: 'Achieve unparalleled cost savings, guaranteed quality, and complete certainty with Global Outsource Bureau\'s professional accounting and taxation solutions tailored for the US market.',
	vatName: 'US (Sales Tax)', /* Adjust for US context */
	taxName: 'US Federal & State',
	ctName: 'US Federal & State',
	currencySymbol: '$',
	blogTaxDescription: 'Expert advice on navigating the complex US tax landscape to reduce your liabilities legally and efficiently.'
	}
	};

	// Function to update content based on country
	function updateContent(country) {
	const content = countryContent[country];

	// Update Home section
	document.querySelector('[data-content="home-title"]').innerHTML = content.homeTitle.replace('<span class="country-name">UK</span>', `<span class="country-name">${country.toUpperCase()}</span>`);
	document.querySelector('[data-content="home-subtitle"]').textContent = content.homeSubtitle;

	// Update Services section
	document.querySelector('.country-vat-name').textContent = content.vatName;
	document.querySelector('.country-tax-name').textContent = content.taxName;
	document.querySelector('.country-ct-name').textContent = content.ctName;

	// Update blog post description
	const blogTaxDescElement = document.querySelector('[data-content="blog-tax-description"]');
	if (blogTaxDescElement) {
	blogTaxDescElement.innerHTML = content.blogTaxDescription.replace('<span class="country-tax-name">UK</span>', `<span class="country-tax-name">${content.taxName}</span>`);
	}

	// Update currency symbol in pricing calculator
	document.querySelectorAll('.currency-symbol').forEach(span => {
	span.textContent = content.currencySymbol;
	});

	// Update service titles for VAT/Tax/CT if they also need to change
	// Note: If only the country name inside changes, the above is enough.
	// If the entire title changes, use data-content on the h3 directly.
	}

	// Flag selector functionality
	const flagIcons = document.querySelectorAll('.flag-icon');
	flagIcons.forEach(flag => {
	flag.addEventListener('click', function() {
	// Remove active class from all flags
	flagIcons.forEach(f => f.classList.remove('active-flag'));
	// Add active class to clicked flag
	this.classList.add('active-flag');
	// Update content
	updateContent(this.dataset.country);
	});
	});

	// Initialize content with UK as default
	updateContent('uk');

	// Resource Tabs functionality
	const resourceTabs = document.querySelectorAll('.resource-tab');
	const resourceContents = document.querySelectorAll('.resource-content');

	resourceTabs.forEach(tab => {
	tab.addEventListener('click', function() {
	// Remove active styles from all tabs
	resourceTabs.forEach(t => {
	t.classList.remove('bg-blue-700', 'text-white');
	t.classList.add('bg-gray-200', 'text-gray-700');
	});
	// Add active styles to clicked tab
	this.classList.remove('bg-gray-200', 'text-gray-700');
	this.classList.add('bg-blue-700', 'text-white');

	// Hide all content sections
	resourceContents.forEach(content => content.classList.add('section-hidden'));
	// Show the target content section
	document.getElementById(this.dataset.target).classList.remove('section-hidden');
	});
	});

	// Pricing Calculator Logic
	const calculateButton = document.getElementById('calculate-savings');
	const currentCostInput = document.getElementById('current-cost');
	const hoursPerMonthInput = document.getElementById('hours-per-month');
	const savingsResultDiv = document.getElementById('savings-result');
	const calculatedAmountSpan = document.getElementById('calculated-amount');

	calculateButton.addEventListener('click', function() {
	const currentCost = parseFloat(currentCostInput.value);
	const hoursPerMonth = parseFloat(hoursPerMonthInput.value);

	if (isNaN(currentCost) \|\| currentCost <= 0) {
	savingsResultDiv.textContent = "Please enter a valid current monthly cost.";
	savingsResultDiv.classList.remove('hidden');
	savingsResultDiv.classList.add('bg-red-100', 'text-red-900', 'border-red-200');
	savingsResultDiv.classList.remove('bg-blue-100', 'text-blue-900', 'border-blue-200');
	return;
	}
	if (isNaN(hoursPerMonth) \|\| hoursPerMonth <= 0) {
	savingsResultDiv.textContent = "Please enter valid estimated hours per month.";
	savingsResultDiv.classList.remove('hidden');
	savingsResultDiv.classList.add('bg-red-100', 'text-red-900', 'border-red-200');
	savingsResultDiv.classList.remove('bg-blue-100', 'text-blue-900', 'border-blue-200');
	return;
	}


	// Simple estimation: assume 50% cost saving
	const estimatedMonthlySavings = currentCost * 0.50;
	const estimatedAnnualSavings = estimatedMonthlySavings * 12;

	calculatedAmountSpan.textContent = estimatedAnnualSavings.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }); // Format with commas
	savingsResultDiv.classList.remove('hidden');
	savingsResultDiv.classList.remove('bg-red-100', 'text-red-900', 'border-red-200');
	savingsResultDiv.classList.add('bg-blue-100', 'text-blue-900', 'border-blue-200');
	});

	// Contact Form Submission (Placeholder)
	const contactForm = document.querySelector('#contact form');
	const formMessage = document.getElementById('form-message');

	contactForm.addEventListener('submit', function(e) {
	e.preventDefault(); // Prevent actual form submission

	// Basic validation
	const name = document.getElementById('name').value.trim();
	const email = document.getElementById('email').value.trim();
	const message = document.getElementById('message').value.trim();

	if (name === '' \|\| email === '' \|\| message === '') {
	formMessage.textContent = 'Please fill in all required fields.';
	formMessage.classList.remove('hidden');
	formMessage.classList.add('text-red-600');
	formMessage.classList.remove('text-green-600');
	} else {
	formMessage.textContent = 'Thank you for your message! We will get back to you shortly.';
	formMessage.classList.remove('hidden');
	formMessage.classList.add('text-green-600');
	formMessage.classList.remove('text-red-600');
	contactForm.reset(); // Clear the form
	}
	});
	});
	</script>
	</html>