forked from UKSOURCE/hailearning.edu.vn
Initial commit
This commit is contained in:
r2xrzh9q2z-lab
416
app/visa/[slug]/Countrydetails.tsx
Normal file
416
app/visa/[slug]/Countrydetails.tsx
Normal file
@@ -0,0 +1,416 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import visaData from "../visa.json";
|
||||
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
interface CountryDetailsClientProps {
|
||||
country: {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
services: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export default function CountryDetailsClient({
|
||||
country,
|
||||
}: CountryDetailsClientProps) {
|
||||
const [showBackToTop, setShowBackToTop] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
// Get detailed data from visa.json
|
||||
const countryData = visaData.visaSystem.detailedView.activeCountry;
|
||||
const relatedCountries =
|
||||
visaData.visaSystem.detailedView.relatedCountries.map((c: any) => ({
|
||||
...c,
|
||||
icon: `${ASSET_URL}/${c.icon}`,
|
||||
}));
|
||||
const contactInfo = visaData.visaSystem.contactInfo;
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setShowBackToTop(window.scrollY > 100);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Back to Top */}
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className={`fixed bottom-8 right-8 w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center cursor-pointer transition-all z-40 ${
|
||||
showBackToTop ? "opacity-100" : "opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 11l5-5m0 0l5 5m-5-5v12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/* Header Top */}
|
||||
<div className="bg-gray-900 text-white py-3 hidden lg:block">
|
||||
<div className="max-w-7xl mx-auto px-8 flex justify-between items-center text-sm">
|
||||
<ul className="flex gap-8">
|
||||
<li>
|
||||
<a href="tel:+093783575222">+09 378 357 5222</a>
|
||||
</li>
|
||||
<li>69 Street, 5th Avenue LA, United States</li>
|
||||
<li>
|
||||
<a href="mailto:info@example.com">info@example.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
<select className="bg-gray-900 text-white border-0 outline-none cursor-pointer">
|
||||
<option>English</option>
|
||||
<option>Bangla</option>
|
||||
<option>Hindi</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-20 bg-white shadow-md">
|
||||
<div className="max-w-7xl mx-auto px-4 lg:px-8 py-4 flex justify-between items-center">
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<img
|
||||
src={`${ASSET_URL}/assets/img/logo/black-logo.svg`}
|
||||
alt="logo"
|
||||
className="h-10"
|
||||
/>
|
||||
</Link>
|
||||
<nav className="hidden lg:flex gap-8">
|
||||
<Link href="/" className="text-gray-700 hover:text-blue-600">
|
||||
Home
|
||||
</Link>
|
||||
<Link href="/about" className="text-gray-700 hover:text-blue-600">
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
href="/country-list"
|
||||
className="text-gray-700 hover:text-blue-600"
|
||||
>
|
||||
VISA
|
||||
</Link>
|
||||
<Link href="/contact" className="text-gray-700 hover:text-blue-600">
|
||||
Contact Us
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="lg:hidden text-2xl"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 z-30 lg:hidden">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
></div>
|
||||
<div className="absolute left-0 top-0 w-80 h-full bg-white p-6 overflow-y-auto">
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="float-right text-2xl"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<nav className="space-y-3 mt-8">
|
||||
<Link href="/" className="block py-2">
|
||||
Home
|
||||
</Link>
|
||||
<Link href="/about" className="block py-2">
|
||||
About Us
|
||||
</Link>
|
||||
<Link href="/country-list" className="block py-2">
|
||||
Visa
|
||||
</Link>
|
||||
<Link href="/contact" className="block py-2">
|
||||
Contact Us
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Breadcrumb */}
|
||||
<section
|
||||
className="py-20 px-4 lg:px-8 bg-cover relative"
|
||||
style={{
|
||||
backgroundImage: `url('${ASSET_URL}/${countryData.mainImage}')`,
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/30"></div>
|
||||
<div className="max-w-7xl mx-auto relative z-10 text-center text-white">
|
||||
<h1 className="text-5xl font-bold mb-6">{countryData.title}</h1>
|
||||
<ul className="flex justify-center gap-4">
|
||||
<li>
|
||||
<Link href="/">Home</Link>
|
||||
</li>
|
||||
<li>›</li>
|
||||
<li>{countryData.name}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
{/* Country Details */}
|
||||
<section className="py-20 px-4 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<img
|
||||
src={`${ASSET_URL}/${countryData.mainImage}`}
|
||||
alt={countryData.name}
|
||||
className="w-full rounded-lg mb-8"
|
||||
/>
|
||||
|
||||
<h2 className="text-4xl font-bold mb-4">{countryData.name}</h2>
|
||||
<p className="text-gray-700 mb-4">{countryData.description}</p>
|
||||
<p className="text-gray-700 mb-4">{countryData.additionalInfo}</p>
|
||||
<h5 className="text-xl font-semibold mb-6">
|
||||
{countryData.tagline}
|
||||
</h5>
|
||||
|
||||
{/* Visa Types */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||
{countryData.visaTypes.map((typeGroup: any, idx: number) => (
|
||||
<React.Fragment key={idx}>
|
||||
{typeGroup.items.map((item: any, itemIdx: number) => (
|
||||
<div
|
||||
key={itemIdx}
|
||||
className="p-6 border-l-4 border-blue-600"
|
||||
>
|
||||
<h5 className="font-bold mb-2">{item.title}</h5>
|
||||
<p className="text-sm text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Visa Process */}
|
||||
<h3 className="text-2xl font-bold mb-6">USA Visa Process</h3>
|
||||
<ul className="space-y-4 mb-8">
|
||||
{countryData.visaProcess.steps.map((process: any) => (
|
||||
<li key={process.number} className="flex gap-4">
|
||||
<span className="font-bold text-blue-600 flex-shrink-0">
|
||||
{process.number}.
|
||||
</span>
|
||||
<span>
|
||||
<strong>{process.title}</strong> – {process.description}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Gallery */}
|
||||
<div className="grid grid-cols-2 gap-6 mb-8">
|
||||
{countryData.gallery.map((image: string, idx: number) => (
|
||||
<img
|
||||
key={idx}
|
||||
src={`${ASSET_URL}/${image}`}
|
||||
alt={`${countryData.name} gallery`}
|
||||
className="rounded-lg w-full"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Visa Types List */}
|
||||
<h3 className="text-2xl font-bold mb-6">Types of Visas</h3>
|
||||
{countryData.visaCategories.steps.map(
|
||||
(subGroup: string[], groupIdx: number) => (
|
||||
<ul className="visa-list-2" key={groupIdx}>
|
||||
{/* Map lần 2 để render từng chuỗi trong mảng con */}
|
||||
{subGroup.map((category: string, idx: number) => (
|
||||
<li key={idx}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
{category}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* Service Options */}
|
||||
<h3 className="text-2xl font-bold mb-6">
|
||||
Our {countryData.name} Visa Service Options
|
||||
</h3>
|
||||
<ul className="space-y-4">
|
||||
{countryData.visaProcess.steps.map((process: any) => (
|
||||
<li key={process.number} className="flex gap-4">
|
||||
<span className="font-bold text-blue-600 flex-shrink-0">
|
||||
{process.number}.
|
||||
</span>
|
||||
<span>
|
||||
<strong>{process.title}</strong> – {process.description}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="lg:col-span-1">
|
||||
{/* Related Countries */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6 mb-6">
|
||||
{relatedCountries.map((c: any) => (
|
||||
<div
|
||||
key={c.id}
|
||||
className="flex items-center justify-between py-4 border-b last:border-0 cursor-pointer hover:text-blue-600"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<img src={c.icon} alt={c.name} className="w-10 h-10" />
|
||||
<h5 className="font-medium">{c.name}</h5>
|
||||
</div>
|
||||
<span className="text-blue-600">›</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Contact Box */}
|
||||
<div
|
||||
className="rounded-lg p-6 text-white relative"
|
||||
style={{
|
||||
backgroundImage: `url('${ASSET_URL}/assets/img/inner-page/country-details/bg.jpg')`,
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/60 rounded-lg"></div>
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-2xl font-bold mb-2">
|
||||
Visa & Immigration
|
||||
</h3>
|
||||
<p className="mb-6">Need Help? Book Lab Visit</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
📞
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm">Call Us:</span>
|
||||
<p className="font-bold">
|
||||
<a href={`tel:${contactInfo.phone}`}>
|
||||
{contactInfo.phone}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
✉️
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm">Mail Us:</span>
|
||||
<p className="font-bold">
|
||||
<a href={`mailto:${contactInfo.email}`}>
|
||||
{contactInfo.email}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
📍
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm">Location:</span>
|
||||
<p className="font-bold">{contactInfo.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer
|
||||
className="py-20 px-4 lg:px-8 bg-cover text-white relative"
|
||||
style={{
|
||||
backgroundImage: `url('${ASSET_URL}/assets/img/home-1/footer-bg.jpg')`,
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 bg-black/60"></div>
|
||||
<div className="max-w-7xl mx-auto relative z-10 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
<a href="tel:+16336547896">+163 3654 7896</a>
|
||||
</h2>
|
||||
<h2 className="text-xl mb-8">
|
||||
69 Street, 5th Avenue LA, United States
|
||||
</h2>
|
||||
<Link href="/">
|
||||
<img
|
||||
src={`${ASSET_URL}/assets/img/logo/white-logo.svg`}
|
||||
alt="logo"
|
||||
className="h-10 mx-auto mb-8"
|
||||
/>
|
||||
</Link>
|
||||
<ul className="flex flex-wrap justify-center gap-8 mb-8">
|
||||
<li>
|
||||
<a href="/" className="hover:text-blue-300">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about" className="hover:text-blue-300">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/country-list" className="hover:text-blue-300">
|
||||
Visa
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog" className="hover:text-blue-300">
|
||||
Pages
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact" className="hover:text-blue-300">
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex justify-center gap-6">
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
𝕏
|
||||
</a>
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
📷
|
||||
</a>
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
in
|
||||
</a>
|
||||
<a href="#" className="hover:text-blue-300">
|
||||
▶
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
283
app/visa/[slug]/page.tsx
Normal file
283
app/visa/[slug]/page.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import React from "react";
|
||||
import visaData from "../visa.json";
|
||||
import Breadcrumb from "../components/Breadcrumb";
|
||||
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
interface VisaCountryData {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
services: string[];
|
||||
}
|
||||
|
||||
interface CountryDetailsProps {
|
||||
params: Promise<{
|
||||
slug: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
// Helper function to map slugs to country names
|
||||
const getCountryFromSlug = (slug: string): string => {
|
||||
const slugToCountry: { [key: string]: string } = {
|
||||
france: "France",
|
||||
uk: "UK",
|
||||
canada: "Canada",
|
||||
germany: "Germany",
|
||||
spain: "Spain",
|
||||
"south-korea": "South Korea",
|
||||
japan: "Japan",
|
||||
croatia: "Croatia",
|
||||
england: "England",
|
||||
indonesia: "Indonesia",
|
||||
"united-states-of-america": "United States of America",
|
||||
};
|
||||
|
||||
return slugToCountry[slug] || slug;
|
||||
};
|
||||
|
||||
export default function CountryDetailsPage({ params }: CountryDetailsProps) {
|
||||
const [country, setCountry] = useState<VisaCountryData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [slug, setSlug] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
// Unwrap the params Promise
|
||||
Promise.resolve(params).then((resolvedParams) => {
|
||||
const currentSlug = resolvedParams.slug;
|
||||
setSlug(currentSlug);
|
||||
|
||||
const countryName = getCountryFromSlug(currentSlug);
|
||||
const foundCountry = visaData.visaSystem.summaryList.find(
|
||||
(c) => c.name === countryName,
|
||||
);
|
||||
|
||||
if (foundCountry) {
|
||||
setCountry(foundCountry);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
}, [params]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="spinner"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!country) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<h1>Country not found</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const countryData = visaData.visaSystem.detailedView.activeCountry;
|
||||
const relatedCountries = visaData.visaSystem.detailedView.relatedCountries;
|
||||
const contactInfo = visaData.visaSystem.contactInfo;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Breadcrumb-Wrapper Section Start */}
|
||||
<Breadcrumb
|
||||
title={countryData.breadcrumb.title}
|
||||
breadcrumbItems={[
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: countryData.name },
|
||||
]}
|
||||
backgroundImage={`${ASSET_URL}/${countryData.breadcrumb.image}`}
|
||||
/>
|
||||
|
||||
{/* Country-details Section Start */}
|
||||
<section className="country-details-section section-padding fix">
|
||||
<div className="container">
|
||||
<div className="country-details-wrapper">
|
||||
<div className="row g-4">
|
||||
{/* Main Content */}
|
||||
<div className="col-lg-8">
|
||||
<div className="country-details-post">
|
||||
<div className="details-image">
|
||||
<img
|
||||
src={`${ASSET_URL}/${countryData.mainImage}`}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<div className="country-details-content">
|
||||
<h2>{countryData.name}</h2>
|
||||
<p>{countryData.description}</p>
|
||||
<p className="mt-3">{countryData.additionalInfo}</p>
|
||||
<h5>{countryData.tagline}</h5>
|
||||
|
||||
{/* Visa Types */}
|
||||
<div className="tourist-visa-box">
|
||||
{/* Render mảng đầu tiên (index 0) */}
|
||||
{countryData.visaTypes[0] && (
|
||||
<div className="tourist-box style-2">
|
||||
{countryData.visaTypes[0].items.map(
|
||||
(item: any, itemIdx: number) => (
|
||||
<div key={itemIdx} className="tourist-content">
|
||||
<h5>{item.title}</h5>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Render mảng thứ hai (index 1) */}
|
||||
{countryData.visaTypes[1] && (
|
||||
<div className="tourist-box">
|
||||
{countryData.visaTypes[1].items.map(
|
||||
(item: any, itemIdx: number) => (
|
||||
<div key={itemIdx} className="tourist-content">
|
||||
<h5>{item.title}</h5>
|
||||
<p>{item.description}</p>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Visa Process */}
|
||||
<h3 className="text">{countryData.visaProcess.title}</h3>
|
||||
<ul className="list-item">
|
||||
{countryData.visaProcess.steps.map(
|
||||
(process: any, idx: number) => (
|
||||
<li key={idx}>
|
||||
{process.number}. {process.title} –
|
||||
<span>{process.description}</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{/* Gallery */}
|
||||
<div className="row g-4 mb-4">
|
||||
{countryData.gallery.map((image: string, idx: number) => (
|
||||
<div key={idx} className="col-lg-6">
|
||||
<div className="thumb">
|
||||
<img src={`${ASSET_URL}/${image}`} alt="img" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Visa Categories */}
|
||||
<h3 className="text mb-3">
|
||||
{countryData.visaCategories.title}
|
||||
</h3>
|
||||
|
||||
{countryData.visaCategories.steps.map(
|
||||
(subGroup: string[], groupIdx: number) => (
|
||||
<ul className="visa-list-2" key={groupIdx}>
|
||||
{/* Map lần 2 để render từng chuỗi trong mảng con */}
|
||||
{subGroup.map((category: string, idx: number) => (
|
||||
<li key={idx}>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
{category}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
),
|
||||
)}
|
||||
|
||||
{/* Service Options */}
|
||||
<h3 className="text">{countryData.visaService.title}</h3>
|
||||
<ul className="list-item">
|
||||
{countryData.visaService.steps.map(
|
||||
(process: any, idx: number) => (
|
||||
<li key={idx}>
|
||||
{process.number}. {process.title} –
|
||||
<span>{process.description}</span>
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="col-lg-4">
|
||||
<div className="country-details-sideber">
|
||||
{relatedCountries.map((relCountry: any, idx: number) => (
|
||||
<div key={idx} className="icon-box-item">
|
||||
<div className="left-item">
|
||||
<div className="icon">
|
||||
<img
|
||||
src={`${ASSET_URL}/${relCountry.icon}`}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
<h5>{relCountry.name}</h5>
|
||||
</div>
|
||||
<i className="fa-solid fa-chevrons-right"></i>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Contact Box */}
|
||||
<div
|
||||
className="visa-contact-box bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${ASSET_URL}/assets/img/inner-page/country-details/bg.jpg)`,
|
||||
padding: "30px",
|
||||
borderRadius: "8px",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<div className="content">
|
||||
<h3>{contactInfo.sectionTitle}</h3>
|
||||
<p>{contactInfo.helpText}</p>
|
||||
<div className="icon-item">
|
||||
<div className="icon">
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
</div>
|
||||
<div className="cont">
|
||||
<span>{contactInfo.phone.label}: </span>
|
||||
<h6>
|
||||
<a href={`tel:${contactInfo.phone.link}`}>
|
||||
{contactInfo.phone.value}
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon-item">
|
||||
<div className="icon">
|
||||
<i className="fa-regular fa-envelope"></i>
|
||||
</div>
|
||||
<div className="cont">
|
||||
<span>{contactInfo.email.label}: </span>
|
||||
<h6>
|
||||
<a href={`mailto:${contactInfo.email.link}`}>
|
||||
{contactInfo.email.value}
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="icon-item">
|
||||
<div className="icon">
|
||||
<i className="fa-regular fa-location-dot"></i>
|
||||
</div>
|
||||
<div className="cont">
|
||||
<span>{contactInfo.location.label}: </span>
|
||||
<h6>{contactInfo.location.address}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
52
app/visa/components/Breadcrumb.tsx
Normal file
52
app/visa/components/Breadcrumb.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
interface BreadcrumbProps {
|
||||
title: string;
|
||||
breadcrumbItems: Array<{
|
||||
label: string;
|
||||
href?: string;
|
||||
}>;
|
||||
backgroundImage?: string;
|
||||
showShape?: boolean;
|
||||
}
|
||||
|
||||
export default function Breadcrumb({
|
||||
title,
|
||||
breadcrumbItems,
|
||||
backgroundImage = `${ASSET_URL}/assets/img/inner-page/breadcrumb.jpg`,
|
||||
showShape = true,
|
||||
}: BreadcrumbProps) {
|
||||
return (
|
||||
<section
|
||||
className="breadcrumb-wrapper fix bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
}}
|
||||
>
|
||||
{showShape && (
|
||||
<div className="shape">
|
||||
<img src={`${ASSET_URL}/assets/img/inner-page/shape.png`} alt="img" />
|
||||
</div>
|
||||
)}
|
||||
<div className="container">
|
||||
<div className="page-heading">
|
||||
<h1 className="breadcrumb-title">{title}</h1>
|
||||
<ul className="breadcrumb-list">
|
||||
{breadcrumbItems.map((item, index) => (
|
||||
<li key={index}>
|
||||
{item.href ? (
|
||||
<a href={item.href}>{item.label}</a>
|
||||
) : (
|
||||
<>
|
||||
{index > 0 && <i className="fa-solid fa-chevron-right"></i>}
|
||||
{item.label}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
411
app/visa/layout.tsx
Normal file
411
app/visa/layout.tsx
Normal file
@@ -0,0 +1,411 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Visaway – Immigration & Visa Consulting HTML Template",
|
||||
description: "Visaway – Immigration & Visa Consulting HTML Template",
|
||||
authors: [{ name: "Gramentheme" }],
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
url: "http://localhost:3000",
|
||||
},
|
||||
};
|
||||
|
||||
export default function VisaLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{/* Preloader Start */}
|
||||
<div id="preloader" className="preloader" style={{ display: "none" }}>
|
||||
<div className="animation-preloader">
|
||||
<div className="spinner"></div>
|
||||
<div className="txt-loading">
|
||||
<span data-text-preloader="V" className="letters-loading">
|
||||
{" "}
|
||||
V{" "}
|
||||
</span>
|
||||
<span data-text-preloader="I" className="letters-loading">
|
||||
{" "}
|
||||
I{" "}
|
||||
</span>
|
||||
<span data-text-preloader="S" className="letters-loading">
|
||||
{" "}
|
||||
S{" "}
|
||||
</span>
|
||||
<span data-text-preloader="A" className="letters-loading">
|
||||
{" "}
|
||||
A{" "}
|
||||
</span>
|
||||
<span data-text-preloader="W" className="letters-loading">
|
||||
{" "}
|
||||
W{" "}
|
||||
</span>
|
||||
<span data-text-preloader="A" className="letters-loading">
|
||||
{" "}
|
||||
A{" "}
|
||||
</span>
|
||||
<span data-text-preloader="Y" className="letters-loading">
|
||||
{" "}
|
||||
Y{" "}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-center">Loading</p>
|
||||
</div>
|
||||
<div className="loader">
|
||||
<div className="row">
|
||||
<div className="col-3 loader-section section-left">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-left">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-right">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
<div className="col-3 loader-section section-right">
|
||||
<div className="bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GT Back To Top Start */}
|
||||
<button id="back-top" className="back-to-top show">
|
||||
<i className="fa-regular fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
{/* GT MouseCursor Start */}
|
||||
<div className="mouseCursor cursor-outer"></div>
|
||||
<div className="mouseCursor cursor-inner"></div>
|
||||
|
||||
{/* Header-Top-Section Start */}
|
||||
<div className="header-top-section">
|
||||
<div className="container-fluid">
|
||||
<div className="header-top-wrapper">
|
||||
<div className="header-left">
|
||||
<ul className="list">
|
||||
<li className="style-2">
|
||||
<span>Help Line</span>
|
||||
<i className="fa-solid fa-phone"></i>
|
||||
<a href="tel:+093783575222">+09 378 357 5222</a>
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-location-dot"></i>
|
||||
69 Street, 5th AvenueLA, United States
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-solid fa-envelope"></i>
|
||||
<a href="mailto:info@example.com">info@example.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<div className="flag-wrap">
|
||||
<div className="flag">
|
||||
<i className="fa-solid fa-globe"></i>
|
||||
</div>
|
||||
<div className="nice-select" tabIndex={0}>
|
||||
<span className="current"> English </span>
|
||||
<ul className="list">
|
||||
<li data-value="1" className="option selected focus">
|
||||
English
|
||||
</li>
|
||||
<li data-value="1" className="option">
|
||||
Bangla
|
||||
</li>
|
||||
<li data-value="1" className="option">
|
||||
Hindi
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="social-item">
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Offcanvas Area Start */}
|
||||
<div className="fix-area">
|
||||
<div className="offcanvas__info">
|
||||
<div className="offcanvas__wrapper">
|
||||
<div className="offcanvas__content">
|
||||
<div className="offcanvas__top mb-5 d-flex justify-content-between align-items-center">
|
||||
<div className="offcanvas__logo">
|
||||
<a href="/">
|
||||
<img
|
||||
src={`${ASSET_URL}/assets/img/logo/black-logo.svg`}
|
||||
alt="logo-img"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="offcanvas__close">
|
||||
<button>
|
||||
<i className="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text d-none d-xl-block">
|
||||
Nullam dignissim, ante scelerisque the is euismod fermentum odio
|
||||
sem semper the is erat, a feugiat leo urna eget eros. Duis
|
||||
Aenean a imperdiet risus.
|
||||
</p>
|
||||
<div className="mobile-menu fix mb-3"></div>
|
||||
<div className="offcanvas__contact d-xl-block">
|
||||
<h4 className="d-xl-block">Contact Info</h4>
|
||||
<ul className="d-xl-block">
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon">
|
||||
<i className="fal fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a target="_blank" href="#">
|
||||
Main Street, Melbourne, Australia
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="fal fa-envelope"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a href="mailto:info@example.com">
|
||||
<span>info@example.com</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="fal fa-clock"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a target="_blank" href="#">
|
||||
Mod-friday, 09am -05pm
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li className="d-flex align-items-center">
|
||||
<div className="offcanvas__contact-icon mr-15">
|
||||
<i className="far fa-phone"></i>
|
||||
</div>
|
||||
<div className="offcanvas__contact-text">
|
||||
<a href="tel:+11002345909">+11002345909</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="social-icon d-flex align-items-center">
|
||||
<a href="#">
|
||||
<i className="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-youtube"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="offcanvas__overlay"></div>
|
||||
|
||||
{/* Header Section Start */}
|
||||
{/* <header id="header-sticky" className="header-1">
|
||||
<div className="container-fluid">
|
||||
<div className="mega-menu-wrapper">
|
||||
<div className="header-main">
|
||||
<div className="header-left">
|
||||
<div className="logo">
|
||||
<a href="/" className="header-logo-2">
|
||||
<img
|
||||
src={`${ASSET_URL}/assets/img/logo/black-logo.svg`}
|
||||
alt="logo-img"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mean__menu-wrapper">
|
||||
<div className="main-menu">
|
||||
<nav id="mobile-menu">
|
||||
<ul>
|
||||
<li className="has-dropdown active menu-thumb">
|
||||
<a href="/"> Home </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About Us</a>
|
||||
</li>
|
||||
<li className="has-dropdown">
|
||||
<a href="#"> Pages </a>
|
||||
<ul className="submenu">
|
||||
<li>
|
||||
<a href="/services">Services</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/visa">Country List</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/pricing">Our Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/appointment">Appointment</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/visa"> VISA </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog"> Blog </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-right d-flex align-items-center mt-0">
|
||||
<div className="header-call-item">
|
||||
<a href="#" className="main-header__search search-toggler">
|
||||
<i className="fa-regular fa-magnifying-glass"></i>
|
||||
</a>
|
||||
<a href="/contact" className="theme-btn">
|
||||
Apply now
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
<div className="header__hamburger my-auto">
|
||||
<div className="sidebar__toggle">
|
||||
<i className="fa-solid fa-bars-staggered"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header> */}
|
||||
|
||||
{/* Search Area Start */}
|
||||
<div className="search-popup">
|
||||
<div className="search-popup__overlay search-toggler"></div>
|
||||
<div className="search-popup__content">
|
||||
<form
|
||||
role="search"
|
||||
method="get"
|
||||
className="search-popup__form"
|
||||
action="#"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder="Search Here..."
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
aria-label="search submit"
|
||||
className="search-btn"
|
||||
>
|
||||
<span>
|
||||
<i className="fa-regular fa-magnifying-glass"></i>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
{children}
|
||||
|
||||
{/* Footer Section Start */}
|
||||
{/* <footer
|
||||
className="footer-section fix bg-cover"
|
||||
style={{
|
||||
backgroundImage: `url(${ASSET_URL}/assets/img/home-1/footer-bg.jpg)`,
|
||||
}}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="footer-wrapper">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="footer-item">
|
||||
<h2>
|
||||
<a href="tel:+16336547896">+163 3654 7896</a>
|
||||
</h2>
|
||||
<h2 className="text">
|
||||
69 Street, 5th AvenueLA, United States
|
||||
</h2>
|
||||
<div className="footer-list-item">
|
||||
<a href="/">
|
||||
<img
|
||||
src={`${ASSET_URL}/assets/img/logo/white-logo.svg`}
|
||||
alt="img"
|
||||
/>
|
||||
</a>
|
||||
<ul className="footer-list">
|
||||
<li>
|
||||
<a href="/">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/visa">Visa</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog">Pages</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog">Article</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="social-icon">
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#">
|
||||
<i className="fa-brands fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
98
app/visa/page.tsx
Normal file
98
app/visa/page.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import visaData from "./visa.json";
|
||||
import Breadcrumb from "./components/Breadcrumb";
|
||||
|
||||
const ASSET_URL = process.env.NEXT_PUBLIC_API_URL || "";
|
||||
|
||||
interface VisaCountry {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
services: string[];
|
||||
}
|
||||
|
||||
const visaCountries: VisaCountry[] = visaData.visaSystem.summaryList.map(
|
||||
(country) => ({
|
||||
...country,
|
||||
icon: `${ASSET_URL}/${country.icon}`,
|
||||
}),
|
||||
);
|
||||
|
||||
export default function VisaListPage() {
|
||||
const getSlug = (countryName: string): string => {
|
||||
return countryName.toLowerCase().replace(/\s+/g, "-");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Breadcrumb-Wrapper Section Start */}
|
||||
<Breadcrumb
|
||||
title={visaData.visaSystem.breadcrumb.list.title}
|
||||
breadcrumbItems={[
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: visaData.visaSystem.breadcrumb.list.title },
|
||||
]}
|
||||
backgroundImage={`${ASSET_URL}/${visaData.visaSystem.breadcrumb.list.image}`}
|
||||
/>
|
||||
|
||||
{/* Service Section Start */}
|
||||
<section className="visa-provide-section section-padding section-bg-1 fix">
|
||||
<div className="container">
|
||||
<div className="row g-4">
|
||||
{visaCountries.map((country) => (
|
||||
<div key={country.id} className="col-lg-6">
|
||||
<div className="visa-provide-box mt-0">
|
||||
<div className="visa-top-item">
|
||||
<div className="visa-left">
|
||||
<div className="icon">
|
||||
<img src={country.icon} alt="img" />
|
||||
</div>
|
||||
<div className="content">
|
||||
<p>Visa Service</p>
|
||||
<h3>
|
||||
<a href={`/visa/${getSlug(country.name)}`}>
|
||||
{country.name}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href={`/visa/${getSlug(country.name)}`}
|
||||
className="theme-btn"
|
||||
>
|
||||
Read More
|
||||
<i className="fa-solid fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="visa-list-item">
|
||||
<ul className="list">
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[0]}
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[1]}
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list">
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[2]}
|
||||
</li>
|
||||
<li>
|
||||
<i className="fa-regular fa-arrow-right"></i>
|
||||
{country.services[3]}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
295
app/visa/visa.json
Normal file
295
app/visa/visa.json
Normal file
@@ -0,0 +1,295 @@
|
||||
{
|
||||
"visaSystem": {
|
||||
"breadcrumb": {
|
||||
"list": {
|
||||
"title": "Country List",
|
||||
"image": "assets/img/inner-page/breadcrumb.jpg"
|
||||
}
|
||||
},
|
||||
"summaryList": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "France",
|
||||
"icon": "assets/img/home-2/visa/03.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "UK",
|
||||
"icon": "assets/img/home-2/visa/11.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Canada",
|
||||
"icon": "assets/img/home-2/visa/02.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Germany",
|
||||
"icon": "assets/img/home-2/visa/12.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Spain",
|
||||
"icon": "assets/img/home-2/visa/13.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "South Korea",
|
||||
"icon": "assets/img/home-2/visa/14.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Japan",
|
||||
"icon": "assets/img/home-2/visa/15.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Croatia",
|
||||
"icon": "assets/img/home-2/visa/16.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "England",
|
||||
"icon": "assets/img/home-2/visa/17.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "Indonesia",
|
||||
"icon": "assets/img/home-2/visa/18.png",
|
||||
"services": [
|
||||
"Student Visa & Admission",
|
||||
"Work Visa – H1B",
|
||||
"Work permit for Canada",
|
||||
"Student Visa for Canada"
|
||||
]
|
||||
}
|
||||
],
|
||||
"detailedView": {
|
||||
"activeCountry": {
|
||||
"id": 1,
|
||||
"name": "United States of America ",
|
||||
"title": "COUNTRY USA",
|
||||
"breadcrumb": {
|
||||
"title": "COUNTRY USA",
|
||||
"image": "assets/img/inner-page/breadcrumb.jpg"
|
||||
},
|
||||
"mainImage": "assets/img/inner-page/country-details/details-1.jpg",
|
||||
"description": "The United States is one of the most popular destinations for international students and immigrants, offering world-class universities, diverse cultural experiences, and countless career opportunities...",
|
||||
"additionalInfo": "Our consultancy provides complete guidance for study visas, work permits, and permanent residency pathways tailored to your goals.",
|
||||
"tagline": "Over the last 35 Years we made an impact that is strong & we have long way to go.",
|
||||
"visaTypes": [
|
||||
{
|
||||
"category": "Tourist & Work",
|
||||
"items": [
|
||||
{
|
||||
"title": "Tourist Visa",
|
||||
"description": "Broad term that can refer to various aspects of interconnectedness"
|
||||
},
|
||||
{
|
||||
"title": "Work Permit",
|
||||
"description": "Broad term that can refer to various aspects of interconnectedness"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "Student & Family",
|
||||
"items": [
|
||||
{
|
||||
"title": "Student",
|
||||
"description": "Broad term that can refer to various aspects of interconnectedness"
|
||||
},
|
||||
{
|
||||
"title": "Tourist Visa",
|
||||
"description": "Broad term that can refer to various aspects of interconnectedness"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"visaProcess": {
|
||||
"title": "USA Visa Process",
|
||||
"steps": [
|
||||
{
|
||||
"number": "01",
|
||||
"title": "Consultation & Eligibility Check",
|
||||
"description": "Our experts review your profile and visa requirements."
|
||||
},
|
||||
{
|
||||
"number": "02",
|
||||
"title": "Application Preparation",
|
||||
"description": "We help with document collection, form filling, and statement drafting."
|
||||
},
|
||||
{
|
||||
"number": "03",
|
||||
"title": "Submission",
|
||||
"description": "Visa application is submitted online with required fees."
|
||||
},
|
||||
{
|
||||
"number": "04",
|
||||
"title": "Interview Guidance",
|
||||
"description": "Get training and mock sessions for embassy interview."
|
||||
},
|
||||
{
|
||||
"number": "05",
|
||||
"title": "Approval & Travel",
|
||||
"description": "Once approved, we provide travel and pre-departure guidance."
|
||||
}
|
||||
]
|
||||
},
|
||||
"gallery": [
|
||||
"assets/img/inner-page/country-details/details-2.jpg",
|
||||
"assets/img/inner-page/country-details/details-3.png"
|
||||
],
|
||||
"visaCategories": {
|
||||
"title": "Types of USA Visas",
|
||||
"steps": [
|
||||
[
|
||||
"Student Visa (F1, M1, J1)",
|
||||
"Work Visa (H1B, L1)",
|
||||
"Tourist Visa (B1/B2)"
|
||||
],
|
||||
["Family/Spouse Visa (K1, IR1, F2A)", "Green Card / Immigrant Visa"]
|
||||
]
|
||||
},
|
||||
"visaService": {
|
||||
"title": "Our USA Visa Service Options",
|
||||
"steps": [
|
||||
{
|
||||
"number": "01",
|
||||
"title": "Consultation & Eligibility Check",
|
||||
"description": "Our experts review your profile and visa requirements."
|
||||
},
|
||||
{
|
||||
"number": "02",
|
||||
"title": "Application Preparation",
|
||||
"description": "We help with document collection, form filling, and statement drafting."
|
||||
},
|
||||
{
|
||||
"number": "03",
|
||||
"title": "Submission",
|
||||
"description": "Visa application is submitted online with required fees."
|
||||
},
|
||||
{
|
||||
"number": "04",
|
||||
"title": "Interview Guidance",
|
||||
"description": "Get training and mock sessions for embassy interview."
|
||||
},
|
||||
{
|
||||
"number": "05",
|
||||
"title": "Approval & Travel",
|
||||
"description": "Once approved, we provide travel and pre-departure guidance."
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"relatedCountries": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Canada",
|
||||
"icon": "assets/img/inner-page/country-details/01.png"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "USA",
|
||||
"icon": "assets/img/inner-page/country-details/02.png"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "USA",
|
||||
"icon": "assets/img/inner-page/country-details/03.png"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Saint Helena",
|
||||
"icon": "assets/img/inner-page/country-details/05.png"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Iran",
|
||||
"icon": "assets/img/inner-page/country-details/06.png"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Spain",
|
||||
"icon": "assets/img/inner-page/country-details/07.png"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Japan",
|
||||
"icon": "assets/img/inner-page/country-details/08.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"contactInfo": {
|
||||
"sectionTitle": "Visa & Immigration",
|
||||
"helpText": "Need Help? Book Lab Visit",
|
||||
"phone": {
|
||||
"label": "Call Us",
|
||||
"value": "+009 438 222 9540",
|
||||
"link": "tel:+0094382229540"
|
||||
},
|
||||
"email": {
|
||||
"label": "Mail Us",
|
||||
"value": "infor@xridergamil.com",
|
||||
"link": "mailto:infor@xridergamil.com"
|
||||
},
|
||||
"location": {
|
||||
"label": "Location",
|
||||
"address": "Toronto, Montreal, City 2026"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user