Banner

Benin Visa For Indians

Embed

<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.38.0/dist/umd/supabase.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

<div id="benin-visa-root" style="max-width:1200px;margin:0 auto;padding:24px 0;"></div>

<style>
:root {
  --primary: #0097a7;
  --primary-dark: #17626c;
  --primary-light: #e8f8fb;
  --cta-gradient: linear-gradient(135deg, #0097a7 0%, #17626c 100%);
  --banner-gradient: linear-gradient(135deg, rgba(0,151,167,0.95) 0%, rgba(23,98,108,0.75) 100%);
  --card-shadow: 0 8px 28px rgba(23,98,108,0.12);
  --card-radius: 18px;
}
#benin-visa-root * {
  font-family: 'Poppins', Arial, sans-serif;
  box-sizing: border-box;
}
.visa-hero-banner {
  position: relative; height: 260px; border-radius: 22px;
  box-shadow: 0 10px 44px rgba(23,98,108,0.15); margin-bottom: 32px; overflow: hidden;
}
.visa-hero-img { width:100%; height:100%; object-fit:cover; filter:brightness(0.8);}
.visa-hero-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--banner-gradient);
}
.visa-hero-content {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; text-align: center; width: 93%;
}
.visa-hero-title {
  font-size: 2.6em; font-weight: 700; text-shadow: 0 4px 22px rgba(0,0,0,0.4);
  letter-spacing: -1.3px; margin-bottom: 14px;
}
.visa-hero-subtitle {
  font-size: 1.18em; font-weight: 500; text-shadow: 0 2px 8px rgba(0,0,0,0.17);
  letter-spacing: -0.7px;
}
.visa-intro {
  background: var(--primary-light); border-radius: 16px; margin-bottom: 38px;
  text-align: center; padding: 32px 18px; box-shadow: 0 2px 8px rgba(23,98,108,0.08);
}
.visa-intro h2 { color: var(--primary-dark); font-size: 2em; font-weight: 700; margin-bottom: 17px; letter-spacing: -1px;}
.visa-intro p { color: #174450; font-size: 1.13em; line-height: 1.65;}
.visa-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; margin: 0 0 54px 0;
}
.visa-card {
  background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  border: 2px solid transparent; transition: 0.3s all cubic-bezier(.4,.1,.5,.9); position: relative; overflow: hidden;
}
.visa-card:hover {
  box-shadow: 0 16px 48px rgba(0,151,167,0.23);
  border-color: var(--primary); transform: translateY(-4px) scale(1.01);
}
.visa-card-header {
  background: var(--cta-gradient); color: #fff;
  padding: 26px 22px 18px 22px; border-radius: var(--card-radius) var(--card-radius) 0 0; position: relative;
}
.visa-card-title { font-size: 1.34em; font-weight: 700; margin-bottom: 6px; letter-spacing: -1px;}
.visa-card-badge {
  display: inline-block; font-size: 0.9em;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(11px);
  padding: 5px 16px; border-radius: 22px; margin-top: 7px; border: 1px solid rgba(255,255,255,0.09)
}
.visa-card-body { padding: 34px 24px 24px 24px; }
.visa-price-section {
  text-align: center; padding: 18px 0 8px 0; border-bottom: 2px dashed var(--primary-light); margin-bottom: 18px;
}
.visa-price { font-size: 2.2em; color: var(--primary); font-weight: 800; letter-spacing: -2px;}
.visa-price-label { color: #666; font-size: 1em; font-weight: 500; margin-top: 5px;}
.visa-details-list { margin: 18px 0 0 0;}
.visa-detail-item {
  display: flex; align-items: flex-start; padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
}
.visa-detail-item:last-child { border-bottom: none; }
.visa-detail-icon { font-size: 1.27em; margin-right: 13px; min-width: 26px; color: var(--primary); opacity: 0.74;}
.visa-detail-content { flex: 1;}
.visa-detail-label { font-weight: 700; color: var(--primary-dark); font-size: 0.98em; margin-bottom: 2px; display: block;}
.visa-detail-value { color: #4a5562; font-size: 1em;}
.visa-apply-btn {
  width: 100%; padding: 14px 0; border: none; border-radius: 12px;
  font-size: 1.13em; font-weight: 700; cursor: pointer; background: var(--cta-gradient); color: #fff;
  margin-top: 18px; transition: 0.25s cubic-bezier(.5,.17,.69,.76); box-shadow: 0 2px 9px rgba(0,151,167,0.12); letter-spacing: -0.8px;
}
.visa-apply-btn:hover, .form-submit-btn:hover {
  background: linear-gradient(135deg,#42c2ca 0%, #17626c 88%);
  box-shadow: 0 8px 28px rgba(0,151,167,0.35); transform: scale(1.035);
}
.visa-app-form {
  margin-top: 22px; padding: 26px 24px; border-radius: 16px;
  background: var(--primary-light); border: 2px solid #e8f8fb; animation: slideDown 0.35s ease; display: none;
}
@keyframes slideDown { from {opacity: 0; transform: translateY(-18px);} to {opacity: 1; transform: translateY(0);} }
.form-group { margin-bottom: 19px;}
.form-group label { display: block; font-weight: 600; color: var(--primary-dark); margin-bottom: 7px; font-size: 1.01em;}
.form-group input, .form-group select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 2px solid #bfdce4; background: #fff; font-size: 1em; transition: border-color 0.3s ease;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary);}
.form-group input[type=file] { background: #eef9f7; padding: 10px;}
.form-submit-btn {
  width: 100%; padding: 15px 0; border: none; border-radius: 10px;
  font-size: 1.13em; font-weight: 700; background: var(--primary-dark); color: #fff;
  cursor: pointer; transition: all 0.24s cubic-bezier(.24,.7,.49,.9); letter-spacing: -0.9px;
}
.form-submit-btn:disabled { background: #abbdbe; cursor: not-allowed; opacity: 0.78; }
.visa-loading-msg { text-align: center; padding: 38px 0; font-size: 1.18em; color: var(--primary-dark);}
.visa-error-msg {
  background: #f7dada; color: #b53a3a; padding: 18px 12px; border-radius: 12px;
  text-align: center; font-size: 1.09em; margin: 18px 0 0 0; border: 1px solid #edd2d2;
}
.visa-success-msg {
  background: #daf6dc; color: var(--primary-dark); padding: 25px 15px; border-radius: 15px;
  text-align: center; font-size: 1.13em; font-weight: 700; margin: 18px 0 0 0;
  box-shadow: 0 2px 12px rgba(23,98,108,0.03); animation: fadeIn 0.55s ease;
}
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@media (max-width: 790px) {
  .visa-hero-title{ font-size: 2em; }
  .visa-cards-grid{ grid-template-columns: 1fr; }
  .visa-intro{ font-size: 0.95em; }
}
</style>

<script>
const SUPABASE_URL = 'https://eqgoctdgipwdgkencsae.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVxZ29jdGRnaXB3ZGdrZW5jc2FlIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjE3OTA4OTUsImV4cCI6MjA3NzM2Njg5NX0.NeakyxE4ueFK6J3XqlQF_u3TeX9EXdsBw-nFMhBiL_Y';
const COUNTRY = 'Benin';
const root = document.getElementById('benin-visa-root');

function el(tag, attrs = {}, html = '') {
  const node = document.createElement(tag);
  Object.entries(attrs).forEach(([a,v]) => node.setAttribute(a,v));
  node.innerHTML = html;
  return node;
}

let client;
try { client = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); }
catch (err) {
  root.innerHTML = "<div class='visa-error-msg'>❌ Failed to connect to database. Contact support.</div>";
}

async function loadBeninVisaPage() {
  root.innerHTML = "<div class='visa-loading-msg'>🔄 Loading Benin visa options...</div>";
  try {
    let supaUser = { email: '', uuid: null, name: '', mobile: '' };
    try {
      const { data: { user } } = await client.auth.getUser();
      if (user) {
        supaUser = {
          email: user.email || '', uuid: user.id || '',
          name: user.user_metadata?.full_name || '', mobile: user.user_metadata?.phone || ''
        };
      }
    } catch {}

    const { data: visaOptions, error: visaErr } = await client
      .from('visa_options').select('*').eq('country', COUNTRY).order('price',{ascending:true});
    if (visaErr || !visaOptions || !visaOptions.length) {
      root.innerHTML = "<div class='visa-error-msg'>⚠️ Visa options not found. Please check back later.</div>";
      return;
    }

    // HERO BANNER
    root.innerHTML = '';
    const hero = el('div', {class:'visa-hero-banner'}, `
      <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80" class="visa-hero-img" alt="Benin scenery">
      <div class="visa-hero-overlay"></div>
      <div class="visa-hero-content">
        <div class="visa-hero-title">🇧🇯 Benin E-Visa Services</div>
        <div class="visa-hero-subtitle">Travel Like A Pro &amp; Relax Like A Baby</div>
      </div>
    `);
    root.appendChild(hero);

    root.appendChild(el('div', {class:'visa-intro'},
      `<h2>Choose Your Benin Visa</h2>
       <p>We offer Benin visa options for travelers. Apply easily online and let GoBaby Travel experts handle everything!</p>`));

    const grid = el('div',{class:'visa-cards-grid'});
    await Promise.all(visaOptions.map(async (visa) => {
      grid.appendChild(await createVisaCard(visa, supaUser));
    }));
    root.appendChild(grid);
  } catch(err){
    root.innerHTML = `<div class='visa-error-msg'>❌ Technical issue: ${err.message}</div>`;
  }
}

async function createVisaCard(visa, supaUser) {
  let docsForVisa = [];
  try {
    const {data} = await client
      .from('visa_documents')
      .select('document_name, document_description')
      .eq('country', COUNTRY)
      .eq('visa_type', visa.visa_type);
    const seen = new Set();
    docsForVisa = (data||[]).filter(d => !seen.has(d.document_name) && seen.add(d.document_name));
  } catch {}

  const card = el('div',{class:'visa-card'});
  card.innerHTML = `
    <div class="visa-card-header">
      <div class="visa-card-title">${visa.visa_type}</div>
      <div class="visa-card-badge">${visa.entry_type}</div>
    </div>`;
  const body = el('div',{class:'visa-card-body'});
  body.innerHTML = `
    <div class="visa-price-section">
      <div class="visa-price">₹${visa.price.toLocaleString()}</div>
      <div class="visa-price-label">Processing Fee</div>
    </div>
    <div class="visa-details-list">
      <div class="visa-detail-item"><div class="visa-detail-icon">⏱️</div><div class="visa-detail-content"><span class="visa-detail-label">Processing Time</span><span class="visa-detail-value">${visa.processing_time}</span></div></div>
      <div class="visa-detail-item"><div class="visa-detail-icon">🎫</div><div class="visa-detail-content"><span class="visa-detail-label">Entry Type</span><span class="visa-detail-value">${visa.entry_type}</span></div></div>
      <div class="visa-detail-item"><div class="visa-detail-icon">📅</div><div class="visa-detail-content"><span class="visa-detail-label">Validity Period</span><span class="visa-detail-value">${visa.validity_period}</span></div></div>
      <div class="visa-detail-item"><div class="visa-detail-icon">⏳</div><div class="visa-detail-content"><span class="visa-detail-label">Stay Duration</span><span class="visa-detail-value">${visa.stay_duration}</span></div></div>
    </div>`;

  const applyBtn = el('button',{class:'visa-apply-btn',type:'button'},'Apply Now');
  body.appendChild(applyBtn);

  const form = el('form',{class:'visa-app-form'});
  form.style.display = 'none';
  form.innerHTML = `
    <div class="form-group"><label>Applicant Name *</label>
      <input type="text" name="applicant_name" required placeholder="Enter your full name" value="${supaUser.name||''}">
    </div>
    <div class="form-group"><label>Mobile Number *</label>
      <input type="tel" name="mobile_number" required placeholder="Enter your mobile number" value="${supaUser.mobile||''}">
    </div>
    ${
      docsForVisa.map(doc => `<div class="form-group"><label>${doc.document_name} *</label>
      <input type="file" name="${doc.document_name.toLowerCase().replace(/[^a-z0-9]/g,'_')}" required accept="image/*,.pdf"></div>`).join('')
    }
    <div class="form-group"><label>Email *</label>
      <input type="email" name="email" required placeholder="Enter your email" value="${supaUser.email||''}" ${supaUser.email ? 'readonly style="background:#edfafd;"' : ''}>
    </div>
    <button class="form-submit-btn" type="submit">Submit Application</button>
  `;
  body.appendChild(form);

  applyBtn.onclick = () => {
    form.style.display = form.style.display === 'block' ? 'none' : 'block';
    if(form.style.display === 'block') form.scrollIntoView({behavior:'smooth'});
  };

  form.onsubmit = async e => {
    e.preventDefault();
    const submitBtn = form.querySelector('.form-submit-btn');
    submitBtn.disabled = true; submitBtn.textContent = 'Submitting...';
    try {
      const fd = new FormData(form);
      let appData = {
        country: COUNTRY, visa_type: visa.visa_type, email: fd.get('email'), status: 'Submitted',
        submitted_at: new Date().toISOString(), user_id: supaUser.uuid, applicant_name: fd.get('applicant_name'), mobile_number: fd.get('mobile_number')
      };
      for(const doc of docsForVisa){
        const fn = doc.document_name.toLowerCase().replace(/[^a-z0-9]/g,'_');
        const f = fd.get(fn);
        if(f && f.size>0 && client.storage){
          const path=`benin_visa/${Date.now()}_${f.name.replace(/\s+/g,'_')}`;
          const { error: uploadErr } = await client.storage.from('visa-uploads').upload(path,f);
          if(uploadErr) throw new Error('Doc upload failed: '+doc.document_name);
          if(doc.document_name.toLowerCase().includes('passport')) appData.passport_url = path;
        }
      }
      const { error: insertErr } = await client.from('visa_applications').insert([appData]);
      if(insertErr) throw insertErr;
      body.innerHTML = `<div class="visa-success-msg">✅ Success! <b>${visa.visa_type}</b> application submitted.<br><small>Our expert team will contact you at <b>${appData.email}</b> soon.</small></div>`;
    } catch(err){
      form.appendChild(el('div',{class:'visa-error-msg'},'❌ Submission failed. Try again or contact support.'));
      submitBtn.disabled = false; submitBtn.textContent = 'Submit Application';
    }
  };

  card.appendChild(body);
  return card;
}

if(document.readyState !== 'loading'){ loadBeninVisaPage(); }
else { document.addEventListener('DOMContentLoaded', loadBeninVisaPage); }
</script>

<div id="visa-roadmap-gobaby">
  <h2>How GoBaby Travel Visa Works</h2>
  <div class="visa-stepper">
    <div class="visa-step">
      <div class="visa-step-circle">1</div>
      <div class="visa-step-line"></div>
      <div class="visa-step-content">
        <b>Submit Documents Online</b>
        <p>Upload your passport, travel and visa documents securely on GoBaby Travel. Your journey starts instantly.</p>
      </div>
    </div>
    <div class="visa-step">
      <div class="visa-step-circle">2</div>
      <div class="visa-step-line"></div>
      <div class="visa-step-content">
        <b>Expert Document Review & File Preparation</b>
        <p>Our team checks your documents for accuracy, prepares your file for smooth processing.</p>
      </div>
    </div>
    <div class="visa-step">
      <div class="visa-step-circle">3</div>
      <div class="visa-step-line"></div>
      <div class="visa-step-content">
        <b>Invoice & Payment Link Sent</b>
        <p>Receive your invoice and secure payment link within <b>30 minutes*</b>. As soon as you pay, processing begins.</p>
      </div>
    </div>
    <div class="visa-step">
      <div class="visa-step-circle">4</div>
      <div class="visa-step-line"></div>
      <div class="visa-step-content">
        <b>We Submit to Immigration</b>
        <p>Once payment is complete, your documents go to immigration. We proactively track your case and update you at every stage.</p>
      </div>
    </div>
    <div class="visa-step last">
      <div class="visa-step-circle">5</div>
      <div class="visa-step-content">
        <b>Receive Updates & Your Visa</b>
        <p>Get automatic notifications as soon as your visa is approved. If anything extra is needed, you’ll hear from us instantly.</p>
      </div>
    </div>
  </div>
  <div style="margin:22px 0 0 0;font-size:0.98em;color:#175b63;">*You can always reach out to us during business hours*</div>
</div>

<style>
#visa-roadmap-gobaby {
  max-width:540px;
  margin:38px auto 0 auto;
  padding-bottom:16px;
  font-family:'Poppins',Arial,sans-serif;
}
#visa-roadmap-gobaby h2 {
  text-align:center;
  color:#17626c;
  font-size:1.32em;
  margin-bottom:33px;
  font-weight:700;
  letter-spacing:.02em;
}
.visa-stepper {
  display:flex;
  flex-direction:column;
  position:relative;
  gap:0;
}
.visa-step {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  position:relative;
  min-height:78px;
}
.visa-step:last-child .visa-step-line {
  display:none;
}
.visa-step-circle {
  background:#17626c;
  color:#fff;
  font-weight:800;
  border-radius:50%;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.17em;
  margin-right:17px;
  margin-top:2px;
  z-index:2;
  box-shadow:0 1.5px 10px #17626c2c;
}
.visa-step-line {
  position:absolute;
  left:18px; /* half circle */
  top:36px;
  height:calc(100% - 36px);
  width:4px;
  background: linear-gradient(to bottom,#e6f5f8 60%,#daf6dc 100%);
  z-index:1;
}
.visa-step-content {
  background:#e6f5f8;
  border-radius:12px;
  padding:14px 22px 13px 24px;
  box-shadow:0 1.6px 11px #0a465017;
  margin-bottom:14px;
  flex:1;
}
.visa-step-content b {
  color:#17626c;
  font-size:1.09em;
  font-weight:700;
}
.visa-step-content p {
  font-size:1.05em;
  color:#165370;
  margin:.5em 0 0 0;
}
.visa-step.last .visa-step-content {
  background:#daf6dc;
}
@media (max-width:580px) {
  .visa-step-content {padding:14px 12px 11px 18px;font-size:0.99em;}
  .visa-step-circle {width:30px;height:30px;min-width:30px;min-height:30px;font-size:1.04em;}
}
</style>

GoBaby Travel

GoBabyTravel is a next-generation global travel platform that transforms how people discover, plan, and experience journeys worldwide. We offer comprehensive travel solutions including international and domestic flight bookings, luxury and budget hotel accommodations, customized honeymoon packages, property stays and homestays, intercity bus and train bookings, complete visa processing services, and exclusive travel deals.

Our Unique Selling Propositions:
- One-stop travel ecosystem covering every aspect of a journey from visa to arrival
- AI-powered personalized itinerary planning that adapts to traveler preferences
- Direct integration with 200+ global suppliers for best pricing and availability
- Loyalty rewards program with cashback on every booking
- 24/7 multilingual customer support across all time zones
- Exclusive partnerships with local guides and authentic experiences unavailable elsewhere
- Carbon offset tracking and sustainable travel options
- Travel buddy matching for solo travelers
- Real-time trip modifications and dynamic rebooking
- Immersive pre-trip virtual destination previews

Our Core Values:
Trust & Transparency - No hidden fees, clear pricing, honest recommendations, and price-match guarantees
Customer Obsession - Every decision is made with traveler happiness and convenience as priority
Cultural Respect - We celebrate diversity and promote responsible, respectful tourism
Innovation - Continuously adopting cutting-edge technology to simplify travel
Accessibility - Making dream destinations reachable for every budget and travel style
Sustainability - Committed to reducing travel's environmental impact through conscious choices
Community - Building a global family of travelers who share experiences and support each other

Our Ethics:
We operate with complete integrity, protecting customer data with bank-level security. We partner only with verified, licensed service providers. We believe travel should enrich both travelers and local communities, so we ensure fair wages and ethical practices throughout our supply chain. We never engage in deceptive marketing or pressure tactics. We empower travelers with complete information to make informed decisions. We stand behind every booking with full support and accountability.

Brand Personality: Adventurous yet reliable, sophisticated yet approachable, globally-minded yet personally attentive, innovative yet trustworthy. We speak to travelers who seek authentic experiences, value seamless service, and want a partner who cares about their journey as much as they do.


Benin Visa For Indians

How GoBaby Travel Visa Works

Sign In

Sign Up