From d24b9ed33edeb2af6da90a17b0abb33271b7d950 Mon Sep 17 00:00:00 2001 From: Le Nhut Huy Date: Mon, 2 Feb 2026 16:16:11 +0700 Subject: [PATCH] build ui header, footer, home page, about page --- app/about/about.json | 112 +- app/about/page.tsx | 67 +- app/about/types.ts | 37 + app/components/Footer.tsx | 191 --- app/components/Header.tsx | 114 -- app/components/about/AboutFeatures.tsx | 71 + app/components/about/AboutHero.tsx | 37 + app/components/about/AboutIntro.tsx | 32 + app/components/about/AboutMission.tsx | 66 + app/components/about/AboutNews.tsx | 92 ++ app/components/about/AboutStats.tsx | 45 + app/components/about/AboutTeam.tsx | 42 + app/components/about/index.ts | 7 + app/components/common/Preloader.tsx | 82 ++ app/components/home/Achievements.tsx | 47 + app/components/home/BlogPreview.tsx | 89 ++ app/components/home/FAQSection.tsx | 83 ++ app/components/home/HeroSection.tsx | 100 ++ app/components/home/Partners.tsx | 58 + app/components/home/Testimonials.tsx | 74 + app/components/home/VideoGallery.tsx | 35 + app/components/home/VisaCountries.tsx | 82 ++ app/components/home/VisaSolutions.tsx | 52 + app/components/home/WhyChooseUs.tsx | 87 ++ app/components/layout/Container.tsx | 17 + app/components/layout/Footer/Footer.tsx | 13 + app/components/layout/Footer/FooterBottom.tsx | 28 + app/components/layout/Footer/FooterTop.tsx | 55 + app/components/layout/Header/Header.tsx | 25 + app/components/layout/Header/HeaderBottom.tsx | 154 ++ app/components/layout/Header/HeaderMenu.tsx | 68 + app/components/layout/Header/HeaderTop.tsx | 63 + app/home.json | 457 ++++++ app/layout.tsx | 51 +- app/page.tsx | 83 +- docs/example/about.html | 793 +++++++++++ docs/example/index.html | 1261 +++++++++++++++++ public/assets/css/main.css | 17 +- 38 files changed, 4336 insertions(+), 451 deletions(-) create mode 100644 app/about/types.ts delete mode 100644 app/components/Footer.tsx delete mode 100644 app/components/Header.tsx create mode 100644 app/components/about/AboutFeatures.tsx create mode 100644 app/components/about/AboutHero.tsx create mode 100644 app/components/about/AboutIntro.tsx create mode 100644 app/components/about/AboutMission.tsx create mode 100644 app/components/about/AboutNews.tsx create mode 100644 app/components/about/AboutStats.tsx create mode 100644 app/components/about/AboutTeam.tsx create mode 100644 app/components/about/index.ts create mode 100644 app/components/common/Preloader.tsx create mode 100644 app/components/home/Achievements.tsx create mode 100644 app/components/home/BlogPreview.tsx create mode 100644 app/components/home/FAQSection.tsx create mode 100644 app/components/home/HeroSection.tsx create mode 100644 app/components/home/Partners.tsx create mode 100644 app/components/home/Testimonials.tsx create mode 100644 app/components/home/VideoGallery.tsx create mode 100644 app/components/home/VisaCountries.tsx create mode 100644 app/components/home/VisaSolutions.tsx create mode 100644 app/components/home/WhyChooseUs.tsx create mode 100644 app/components/layout/Container.tsx create mode 100644 app/components/layout/Footer/Footer.tsx create mode 100644 app/components/layout/Footer/FooterBottom.tsx create mode 100644 app/components/layout/Footer/FooterTop.tsx create mode 100644 app/components/layout/Header/Header.tsx create mode 100644 app/components/layout/Header/HeaderBottom.tsx create mode 100644 app/components/layout/Header/HeaderMenu.tsx create mode 100644 app/components/layout/Header/HeaderTop.tsx create mode 100644 app/home.json create mode 100644 docs/example/about.html create mode 100644 docs/example/index.html diff --git a/app/about/about.json b/app/about/about.json index 73963bd..dcdfd59 100644 --- a/app/about/about.json +++ b/app/about/about.json @@ -1,33 +1,97 @@ { - "title": "Về Chúng Tôi", - "subtitle": "Đối tác tin cậy cho dịch vụ visa và du lịch", - "description": "Chúng tôi là công ty hàng đầu trong lĩnh vực tư vấn visa và dịch vụ du lịch, với hơn 10 năm kinh nghiệm phục vụ khách hàng.", - "sections": [ - { - "heading": "Sứ Mệnh", - "content": "Mang đến cho khách hàng những trải nghiệm du lịch tuyệt vời và hỗ trợ thủ tục visa một cách nhanh chóng, chính xác." - }, - { - "heading": "Tầm Nhìn", - "content": "Trở thành công ty dẫn đầu trong lĩnh vực dịch vụ visa và du lịch tại Việt Nam." - }, - { - "heading": "Giá Trị Cốt Lõi", - "content": "Uy tín - Chất lượng - Tận tâm - Chuyên nghiệp" - } - ], + "hero": { + "title": "About Us", + "subtitle": "Global Education Simplified", + "breadcrumb": [ + "Home", + "About Us" + ], + "backgroundImage": "/assets/img/inner-page/breadcrumb.jpg" + }, + "intro": { + "heading": "Building Pathways to Your Immigration Success", + "description": "We provide expert guidance, personalized solutions, and transparent processes to help you achieve your immigration goals. Our dedicated team ensures a smooth journey, building pathways to your international success.", + "highlights": [ + "Expert Visa Consulting", + "Smooth Documentation Process", + "Personalized Student Guidance" + ], + "image": "/assets/img/inner-page/intro.jpg" + }, + "mission": { + "title": "Our Commitment to Your Future", + "items": [ + { + "label": "Mission", + "description": "To guide students with expert visa consulting, ensuring a smooth process from application to approval and turning dreams into reality." + }, + { + "label": "Vision", + "description": "To be the most trusted global education consultancy, expanding opportunities and building paths to international success for every student." + }, + { + "label": "Values", + "description": "Transparency, integrity, and excellence in every visa application, ensuring reliable assistance and professional support." + } + ] + }, "stats": [ { - "number": "10000+", - "label": "Khách hàng hài lòng" + "label": "Years Experience", + "value": 10 }, { - "number": "50+", - "label": "Quốc gia hỗ trợ visa" + "label": "Students Helped", + "value": 1000 }, { - "number": "99%", - "label": "Tỷ lệ thành công" + "label": "Success Rate", + "value": "95%" + }, + { + "label": "Countries Covered", + "value": 50 } - ] + ], + "team": { + "title": "Meet Our Expert Team", + "members": [ + { + "name": "Eleanor Pena", + "role": "Lead Legal Consultant", + "image": "/assets/img/home-1/testimonial/client.png", + "social": { + "facebook": "href", + "linkedin": "href" + } + }, + { + "name": "Jerome Bell", + "role": "Senior Visa Expert", + "image": "/assets/img/home-1/testimonial/client-2.png", + "social": { + "facebook": "href", + "linkedin": "href" + } + }, + { + "name": "Marvin McKinney", + "role": "Immigration Advisor", + "image": "/assets/img/home-1/news/client.png", + "social": { + "facebook": "href", + "linkedin": "href" + } + }, + { + "name": "Kathryn Murphy", + "role": "Education Consultant", + "image": "/assets/img/home-1/testimonial/client.png", + "social": { + "facebook": "href", + "linkedin": "href" + } + } + ] + } } diff --git a/app/about/page.tsx b/app/about/page.tsx index 46f771d..c909cf5 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,49 +1,24 @@ -import aboutData from "./about.json"; +import { + AboutHero, + AboutIntro, + AboutMission, + AboutStats, + AboutTeam, + AboutFeatures, + AboutNews +} from '../components/about'; +import aboutData from './about.json'; export default function AboutPage() { - return ( -
-
- {/* Header */} -
-

- {aboutData.title} -

-

{aboutData.subtitle}

-

- {aboutData.description} -

-
- - {/* Sections */} -
- {aboutData.sections.map((section, index) => ( -
-

- {section.heading} -

-

{section.content}

-
- ))} -
- - {/* Stats */} -
-

- Thành Tích Của Chúng Tôi -

-
- {aboutData.stats.map((stat, index) => ( -
-
- {stat.number} -
-
{stat.label}
-
- ))} -
-
-
-
- ); + return ( + <> + + + + + + + + + ); } diff --git a/app/about/types.ts b/app/about/types.ts new file mode 100644 index 0000000..f8049fc --- /dev/null +++ b/app/about/types.ts @@ -0,0 +1,37 @@ +export interface AboutData { + hero: { + title: string; + subtitle: string; + breadcrumb: string[]; + backgroundImage: string; + }; + intro: { + heading: string; + description: string; + highlights: string[]; + image: string; + }; + mission: { + title: string; + items: { + label: string; + description: string; + }[]; + }; + stats: { + label: string; + value: number | string; + }[]; + team: { + title: string; + members: { + name: string; + role: string; + image: string; + social: { + facebook: string; + linkedin: string; + }; + }[]; + }; +} diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx deleted file mode 100644 index dc1fb12..0000000 --- a/app/components/Footer.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import Link from "next/link"; - -export default function Footer() { - const currentYear = new Date().getFullYear(); - - const quickLinks = [ - { name: "Về chúng tôi", href: "/about" }, - { name: "Dịch vụ", href: "/services" }, - { name: "Bảng giá", href: "/pricing" }, - { name: "Blog", href: "/blog" }, - { name: "Liên hệ", href: "/contact" }, - ]; - - const visaServices = [ - { name: "Visa Mỹ", href: "/visa" }, - { name: "Visa Schengen", href: "/visa" }, - { name: "Visa Nhật Bản", href: "/visa" }, - { name: "Visa Hàn Quốc", href: "/visa" }, - { name: "Visa Canada", href: "/visa" }, - ]; - - const countries = [ - { name: "Châu Âu", href: "/countries" }, - { name: "Bắc Mỹ", href: "/countries" }, - { name: "Châu Á", href: "/countries" }, - { name: "Châu Đại Dương", href: "/countries" }, - ]; - - return ( -
-
-
- {/* Company Info */} -
-
-
- V -
-
-
VisaService
-
Dịch vụ visa uy tín
-
-
-

- Đối tác tin cậy cho dịch vụ visa và du lịch với hơn 10 năm kinh - nghiệm. Cam kết mang đến dịch vụ chất lượng cao với tỷ lệ thành - công 99%. -

- -
- - {/* Quick Links */} -
-

Liên Kết Nhanh

-
    - {quickLinks.map((link) => ( -
  • - - {link.name} - -
    • - ))} -
-
- - {/* Visa Services */} -
-

Dịch Vụ Visa

-
    - {visaServices.map((service) => ( -
  • - - {service.name} - -
    • - ))} -
-
- - {/* Contact Info */} -
-

Thông Tin Liên Hệ

-
-
- 📍 -
-

- 123 Nguyễn Huệ, Quận 1
- TP. Hồ Chí Minh -

-
-
-
- 📞 -

+84 28 1234 5678

-
-
- ✉️ -

info@visaservice.com

-
-
- 🕒 -
-

- Thứ 2 - Thứ 6: 8:00 - 18:00 -
- Thứ 7: 8:00 - 12:00 -

-
-
-
-
-
- - {/* Bottom Section */} -
-
-
- © {currentYear} VisaService. Tất cả quyền được bảo lưu. -
-
- - Chính sách bảo mật - - - Điều khoản sử dụng - - - Sitemap - -
-
-
-
- - {/* Floating Contact Button */} -
- - 💬 - -
-
- ); -} diff --git a/app/components/Header.tsx b/app/components/Header.tsx deleted file mode 100644 index 3e8f926..0000000 --- a/app/components/Header.tsx +++ /dev/null @@ -1,114 +0,0 @@ -"use client"; - -import { useState } from "react"; -import Link from "next/link"; - -export default function Header() { - const [isMenuOpen, setIsMenuOpen] = useState(false); - - const navigation = [ - { name: "Trang chủ", href: "/" }, - { name: "Về chúng tôi", href: "/about" }, - { name: "Dịch vụ", href: "/services" }, - { name: "Visa", href: "/visa" }, - { name: "Quốc gia", href: "/countries" }, - { name: "Bảng giá", href: "/pricing" }, - { name: "Blog", href: "/blog" }, - { name: "Liên hệ", href: "/contact" }, - ]; - - return ( -
-
-
- {/* Logo */} - -
- V -
-
-
VisaService
-
Dịch vụ visa uy tín
-
- - - {/* Desktop Navigation */} - - - {/* CTA Buttons */} -
- - Đặt lịch tư vấn - -
- 📞 - 1900 1234 -
-
- - {/* Mobile Menu Button */} - -
- - {/* Mobile Menu */} - {isMenuOpen && ( -
-
- {navigation.map((item) => ( - setIsMenuOpen(false)} - > - {item.name} - - ))} -
- setIsMenuOpen(false)} - > - Đặt lịch tư vấn - -
- 📞 - 1900 1234 -
-
-
-
- )} -
-
- ); -} diff --git a/app/components/about/AboutFeatures.tsx b/app/components/about/AboutFeatures.tsx new file mode 100644 index 0000000..18992c7 --- /dev/null +++ b/app/components/about/AboutFeatures.tsx @@ -0,0 +1,71 @@ +import Link from 'next/link'; + +const AboutFeatures = () => { + return ( +
+
+
+
+
+
+ img +
+
+
+
+
+ Your Travel Made Easy +

+ Smooth Visa Journey Guaranteed +

+
+

+ We provide expert guidance for every visa application, ensuring smooth processing, personalized support, and reliable assistance +

+
+
+ img +
+
+
Expert Consultants
+

+ Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. +

+
+
+
+
+ img +
+
+
Personalized Support
+

+ Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. +

+
+
+
+
+ img +
+
+
Transparent Process
+

+ Skilled and knowledgeable visa advisors. Skilled and knowled geable visa advisors. +

+
+
+ + Get Started Today + + +
+
+
+
+
+
+ ); +}; + +export default AboutFeatures; diff --git a/app/components/about/AboutHero.tsx b/app/components/about/AboutHero.tsx new file mode 100644 index 0000000..b18f21a --- /dev/null +++ b/app/components/about/AboutHero.tsx @@ -0,0 +1,37 @@ +import Link from 'next/link'; +import { AboutData } from '../../about/types'; + +interface AboutHeroProps { + data: AboutData['hero']; +} + +const AboutHero = ({ data }: AboutHeroProps) => { + return ( +
+
+ img +
+
+
+

{data.title}

+
    + {data.breadcrumb.map((item, index) => ( +
  • + {index === data.breadcrumb.length - 1 ? ( + item + ) : ( + <> + {item} + + + )} +
    • + ))} +
+
+
+
+ ); +}; + +export default AboutHero; diff --git a/app/components/about/AboutIntro.tsx b/app/components/about/AboutIntro.tsx new file mode 100644 index 0000000..337ea63 --- /dev/null +++ b/app/components/about/AboutIntro.tsx @@ -0,0 +1,32 @@ +import { AboutData } from '../../about/types'; + +interface AboutIntroProps { + data: AboutData['intro']; +} + +const AboutIntro = ({ data }: AboutIntroProps) => { + return ( +
+
+
+
+ Company Intro +

+ {data.heading} +

+
+

+ {data.description} +

+
+
+
+ img +
+
+
+
+ ); +}; + +export default AboutIntro; diff --git a/app/components/about/AboutMission.tsx b/app/components/about/AboutMission.tsx new file mode 100644 index 0000000..6b6ac48 --- /dev/null +++ b/app/components/about/AboutMission.tsx @@ -0,0 +1,66 @@ +import Link from 'next/link'; +import { AboutData } from '../../about/types'; + +interface AboutMissionProps { + data: AboutData['mission']; +} + +const AboutMission = ({ data }: AboutMissionProps) => { + return ( +
+
+ img +
+
+
+
+
+
+ img +
+ img +
+
+ img +
+
+ img +
+
+ img +
+
+
+
+
+
+ About Our Consultancy +

+ {data.title} +

+
+
+ {data.items.map((item, index) => ( +
+ + + {item.label} + +

{item.description}

+
+ ))} +
+ + Get Started + + +
+
+
+
+
+
+ ); +}; + +export default AboutMission; diff --git a/app/components/about/AboutNews.tsx b/app/components/about/AboutNews.tsx new file mode 100644 index 0000000..edf3287 --- /dev/null +++ b/app/components/about/AboutNews.tsx @@ -0,0 +1,92 @@ +import Link from 'next/link'; + +const AboutNews = () => { + const newsItems = [ + { + image: '/assets/img/home-1/news/news-1.jpg', + category: 'Student Visa', + comments: '08', + date: '20 August ,2025', + title: 'Step-by-Step Guide to Applying for a Student Visa', + author: 'Sohel', + authorImage: '/assets/img/home-1/news/client.png' + }, + { + image: '/assets/img/home-1/news/news-2.jpg', + category: 'IELTS / TOEFL', + comments: '08', + date: '20 August ,2025', + title: 'Tips to Prepare Financial Documents for Visa Approval', + author: 'Sohel', + authorImage: '/assets/img/home-1/news/client.png' + }, + { + image: '/assets/img/home-1/news/news-3.jpg', + category: 'Study Abroad', + comments: '08', + date: '20 August ,2025', + title: 'Post-Arrival Guide What Every Student Should Know', + author: 'Sohel', + authorImage: '/assets/img/home-1/news/client.png' + } + ]; + + return ( +
+
+
+
+ Visa Tips & Guides +

+ Latest Insights & Updates +

+
+ + view all articies + + +
+
+ {newsItems.map((item, index) => ( +
+
+
+ img + {item.category} +
+
+
+
+
+
+
+
+
+ Comment ({item.comments}) + _ {item.date} +
+

+ + {item.title} + +

+
+
+ img + By {item.author} +
+ + View Articles + +
+
+
+
+ ))} +
+
+
+ ); +}; + +export default AboutNews; diff --git a/app/components/about/AboutStats.tsx b/app/components/about/AboutStats.tsx new file mode 100644 index 0000000..9f08697 --- /dev/null +++ b/app/components/about/AboutStats.tsx @@ -0,0 +1,45 @@ +import { AboutData } from '../../about/types'; + +interface AboutStatsProps { + data: AboutData['stats']; +} + +const AboutStats = ({ data }: AboutStatsProps) => { + return ( +
+
+ img +
+
+
+ Did You Know +

+ Our Achievements in Numbers +

+
+
+
+
+
+ {data.map((stat, index) => { + // Helper to extract number and suffix from value + const valueStr = String(stat.value); + const numericMatch = valueStr.match(/(\d+)/); + const numericValue = numericMatch ? numericMatch[0] : "0"; + const suffix = valueStr.replace(numericValue, ""); + + return ( +
+

00{suffix}

+
{stat.label}
+
+ ); + })} +
+
+
+
+ ); +}; + +export default AboutStats; diff --git a/app/components/about/AboutTeam.tsx b/app/components/about/AboutTeam.tsx new file mode 100644 index 0000000..317d0ad --- /dev/null +++ b/app/components/about/AboutTeam.tsx @@ -0,0 +1,42 @@ +import { AboutData } from '../../about/types'; + +interface AboutTeamProps { + data: AboutData['team']; +} + +const AboutTeam = ({ data }: AboutTeamProps) => { + return ( +
+
+
+ Our Expert Team +

+ {data.title} +

+
+
+ {data.members.map((member, index) => ( +
+
+
+ {member.name} +
+
+

{member.name}

+ {member.role} +
+ {member.social.facebook && } + {member.social.linkedin && } + +
+
+
+
+ ))} +
+
+
+ ); +}; + +export default AboutTeam; diff --git a/app/components/about/index.ts b/app/components/about/index.ts new file mode 100644 index 0000000..288c398 --- /dev/null +++ b/app/components/about/index.ts @@ -0,0 +1,7 @@ +export { default as AboutHero } from './AboutHero'; +export { default as AboutIntro } from './AboutIntro'; +export { default as AboutMission } from './AboutMission'; +export { default as AboutFeatures } from './AboutFeatures'; +export { default as AboutNews } from './AboutNews'; +export { default as AboutStats } from './AboutStats'; +export { default as AboutTeam } from './AboutTeam'; diff --git a/app/components/common/Preloader.tsx b/app/components/common/Preloader.tsx new file mode 100644 index 0000000..f71efda --- /dev/null +++ b/app/components/common/Preloader.tsx @@ -0,0 +1,82 @@ +'use client'; + +import { useEffect, useState } from 'react'; + +const Preloader = () => { + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + // Simulate loading time or wait for window load + const handleLoad = () => { + // Add a small delay to ensure assets are loaded or at least a smooth transition + setTimeout(() => { + setIsLoading(false); + }, 500); + }; + + if (document.readyState === 'complete') { + handleLoad(); + } else { + window.addEventListener('load', handleLoad); + // Fallback in case load event already fired or takes too long + const timeoutId = setTimeout(handleLoad, 3000); + return () => { + window.removeEventListener('load', handleLoad); + clearTimeout(timeoutId); + }; + } + }, []); + + if (!isLoading) return null; + + return ( +
+
+
+
+
+ + V + + + I + + + S + + + A + + + W + + + A + + + Y + +
+

Loading

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default Preloader; diff --git a/app/components/home/Achievements.tsx b/app/components/home/Achievements.tsx new file mode 100644 index 0000000..689328c --- /dev/null +++ b/app/components/home/Achievements.tsx @@ -0,0 +1,47 @@ +interface AchievementsProps { + data: { + heading: string; + subheading: string; + items: { + value: string; + suffix: string; + label: string; + description: string; + }[]; + }; +} + +const Achievements = ({ data }: AchievementsProps) => { + return ( +
+
+ img +
+
+
+ {data.subheading} +

+ {data.heading} +

+
+
+
+
+
+ {data.items.map((item, index) => ( +
+

00{item.suffix}

+
{item.label}
+

+ {item.description} +

+
+ ))} +
+
+
+
+ ); +}; + +export default Achievements; diff --git a/app/components/home/BlogPreview.tsx b/app/components/home/BlogPreview.tsx new file mode 100644 index 0000000..28ca33a --- /dev/null +++ b/app/components/home/BlogPreview.tsx @@ -0,0 +1,89 @@ +import Link from 'next/link'; + +interface BlogPreviewProps { + data: { + heading: string; + subheading: string; + ctaButton: { + label: string; + href: string; + }; + items: { + title: string; + excerpt: string; + category: string; + date: string; + author: { + name: string; + avatar: string; + }; + comments: number; + link: string; + thumbnail: string; + }[]; + }; +} + +const BlogPreview = ({ data }: BlogPreviewProps) => { + const formatDate = (dateString: string) => { + const date = new Date(dateString); + return date.toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric' }); + }; + + return ( +
+
+
+
+ {data.subheading} +

+ {data.heading} +

+
+ + {data.ctaButton.label} + + +
+
+ {data.items.map((item, index) => ( +
+
+
+ img + {item.category} +
+
+
+
+
+
+
+
+
+ Comment ({item.comments.toString().padStart(2, '0')}) + _ {formatDate(item.date)} +
+

+ + {item.title} + +

+
+
+ img + By {item.author.name} +
+ View Articles +
+
+
+
+ ))} +
+
+
+ ); +}; + +export default BlogPreview; diff --git a/app/components/home/FAQSection.tsx b/app/components/home/FAQSection.tsx new file mode 100644 index 0000000..dc28c12 --- /dev/null +++ b/app/components/home/FAQSection.tsx @@ -0,0 +1,83 @@ +import Link from 'next/link'; + +interface FAQSectionProps { + data: { + heading: string; + subheading: string; + description: string; + ctaButton: { + label: string; + href: string; + }; + items: { + question: string; + answer: string; + }[]; + }; +} + +const FAQSection = ({ data }: FAQSectionProps) => { + return ( +
+
+
+
+
+
+
+ {data.subheading} +

+ {data.heading} +

+
+

+ {data.description} +

+ + {data.ctaButton.label} + + +
+
+
+
+
+ {data.items.map((item, index) => ( +
+
+ +
+
+
+

+ {item.answer} +

+
+
+
+ ))} +
+
+
+
+
+
+
+ ); +}; + +export default FAQSection; diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx new file mode 100644 index 0000000..07d93e1 --- /dev/null +++ b/app/components/home/HeroSection.tsx @@ -0,0 +1,100 @@ +import Link from 'next/link'; + +interface HeroSectionProps { + data: { + title: string; + subtitle: string; + description: string; + primaryButton: { + label: string; + href: string; + }; + secondaryButton: { + label: string; + href: string; + }; + backgroundImage: string; + videoUrl: string; + }; +} + +const HeroSection = ({ data }: HeroSectionProps) => { + return ( +
+
+ img +
+
+ img +
+
+ img +
+
+ img +
+
+
+ + 03 + + + 05 + +
+
+
+
+
+
+
+
+
+
{data.subtitle}
+

+ {data.title} + + + +

+

+ {data.description} +

+
+ + {data.primaryButton.label} + + + + {data.secondaryButton.label} + + +
+
+
+
+
+
+
+
+
+
+
+ img +
+
+
+
+ img +
+
+
+
+
+
+
+
+ ); +}; + +export default HeroSection; diff --git a/app/components/home/Partners.tsx b/app/components/home/Partners.tsx new file mode 100644 index 0000000..4135917 --- /dev/null +++ b/app/components/home/Partners.tsx @@ -0,0 +1,58 @@ +interface PartnersProps { + data: { + heading: string; + items: { + name: string; + logo: string; + year: string; + }[]; + }; +} + +const Partners = ({ data }: PartnersProps) => { + return ( + <> + {/* Awards Section */} +
+
+
+ {data.items.slice(0, 4).map((partner, index) => ( +
+
+
+ img +
+

{partner.name}

+
{partner.year}
+
+
+ ))} +
+
+
+ + {/* Brand Partners Section */} +
+
+
+
+
+
+ {data.items.slice(4).map((partner, index) => ( +
+
+ {partner.name} +
+
+ ))} +
+
+
+
+
+
+ + ); +}; + +export default Partners; diff --git a/app/components/home/Testimonials.tsx b/app/components/home/Testimonials.tsx new file mode 100644 index 0000000..9e75793 --- /dev/null +++ b/app/components/home/Testimonials.tsx @@ -0,0 +1,74 @@ +interface TestimonialsProps { + data: { + heading: string; + subheading: string; + videoUrl: string; + videoThumbnail: string; + items: { + name: string; + role: string; + country: string; + rating: number; + comment: string; + avatar: string; + }[]; + }; +} + +const Testimonials = ({ data }: TestimonialsProps) => { + return ( +
+
+
+ {data.subheading} +

+ {data.heading} +

+
+
+
+
+
+ img + + +
Real stories
+
+
+
+
+
+ {data.items.map((testimonial, index) => ( +
+
+
+ {Array.from({ length: testimonial.rating }).map((_, i) => ( + + ))} +
+

+ {testimonial.comment} +

+
+
+ img +
+
+
{testimonial.name}
+ {testimonial.country} +
+
+
+
+ ))} +
+
+
+
+
+
+
+ ); +}; + +export default Testimonials; diff --git a/app/components/home/VideoGallery.tsx b/app/components/home/VideoGallery.tsx new file mode 100644 index 0000000..44faf61 --- /dev/null +++ b/app/components/home/VideoGallery.tsx @@ -0,0 +1,35 @@ +interface VideoGalleryProps { + data: { + heading: string; + videoUrl: string; + thumbnail: string; + }; +} + +const VideoGallery = ({ data }: VideoGalleryProps) => { + return ( +
+ +
+ img +
+
+ img +
+
+
+
+ img +
+

{data.heading.split(' ').map((word, index) => ( + {word}{index === 0 ?
: ' '} + ))}

+
+
+
+ ); +}; + +export default VideoGallery; diff --git a/app/components/home/VisaCountries.tsx b/app/components/home/VisaCountries.tsx new file mode 100644 index 0000000..1d44bfc --- /dev/null +++ b/app/components/home/VisaCountries.tsx @@ -0,0 +1,82 @@ +import Link from 'next/link'; + +interface VisaCountriesProps { + data: { + heading: string; + subheading: string; + description: string; + countries: { + name: string; + code: string; + flag: string; + link: string; + visaTypes: string[]; + }[]; + ctaButton: { + label: string; + href: string; + }; + }; +} + +const VisaCountries = ({ data }: VisaCountriesProps) => { + // Display the first country as featured + const featuredCountry = data.countries[0]; + const halfLength = Math.ceil(featuredCountry.visaTypes.length / 2); + const firstColumn = featuredCountry.visaTypes.slice(0, halfLength); + const secondColumn = featuredCountry.visaTypes.slice(halfLength); + + return ( +
+
+
+
+
+
+
+ {data.subheading} +

+ {data.heading} +

+
+

+ {data.description} +

+
+
    + {firstColumn.map((visaType, index) => ( +
  • + + {visaType} +
    • + ))} +
+
    + {secondColumn.map((visaType, index) => ( +
  • + + {visaType} +
    • + ))} +
+
+ + {data.ctaButton.label} + + +
+
+
+
+ img +
{featuredCountry.code}.{featuredCountry.name}
+
+
+
+
+
+
+ ); +}; + +export default VisaCountries; diff --git a/app/components/home/VisaSolutions.tsx b/app/components/home/VisaSolutions.tsx new file mode 100644 index 0000000..c11bbcc --- /dev/null +++ b/app/components/home/VisaSolutions.tsx @@ -0,0 +1,52 @@ +import Link from 'next/link'; + +interface VisaSolutionsProps { + data: { + heading: string; + subheading: string; + items: { + number: string; + title: string; + description: string; + link: string; + }[]; + }; +} + +const VisaSolutions = ({ data }: VisaSolutionsProps) => { + return ( +
+
+
+ {data.subheading} +

+ {data.heading} +

+
+
+ {data.items.map((item, index) => ( +
+
+
+
+
+
{item.number}
+

+ {item.title} +

+
+
+

+ {item.description} +

+ Service Details +
+
+
+
+ ))} +
+ ); +}; + +export default VisaSolutions; diff --git a/app/components/home/WhyChooseUs.tsx b/app/components/home/WhyChooseUs.tsx new file mode 100644 index 0000000..e8e7c1e --- /dev/null +++ b/app/components/home/WhyChooseUs.tsx @@ -0,0 +1,87 @@ +import Link from 'next/link'; + +interface WhyChooseUsProps { + data: { + heading: string; + subheading: string; + description: string; + items: { + icon: string; + title: string; + description: string; + }[]; + features: string[]; + ctaButton: { + label: string; + href: string; + }; + }; +} + +const WhyChooseUs = ({ data }: WhyChooseUsProps) => { + return ( +
+
+ img +
+
+
+
+
+
+ img +
+ img +
+
+ img +
+
+ img +
+
+ img +
+
+
+
+
+
+ {data.subheading} +

+ {data.heading.split(' Dreams ')[0]} Dreams {data.heading.split(' Dreams ')[1]} +

+
+

+ {data.description} +

+
+ {data.items.map((item, index) => ( +
+ {item.title}- +

{item.description}

+
+ ))} +
+
    + {data.features.map((feature, index) => ( +
  • + + {feature} +
    • + ))} +
+ + {data.ctaButton.label} + + +
+
+
+
+
+
+ ); +}; + +export default WhyChooseUs; diff --git a/app/components/layout/Container.tsx b/app/components/layout/Container.tsx new file mode 100644 index 0000000..0150d65 --- /dev/null +++ b/app/components/layout/Container.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +interface ContainerProps { + children: React.ReactNode; + className?: string; + fluid?: boolean; +} + +const Container: React.FC = ({ children, className = '', fluid = false }) => { + return ( +
+ {children} +
+ ); +}; + +export default Container; diff --git a/app/components/layout/Footer/Footer.tsx b/app/components/layout/Footer/Footer.tsx new file mode 100644 index 0000000..e97ee25 --- /dev/null +++ b/app/components/layout/Footer/Footer.tsx @@ -0,0 +1,13 @@ +import FooterTop from './FooterTop'; +import FooterBottom from './FooterBottom'; + +const Footer = () => { + return ( + <> + + + + ); +}; + +export default Footer; diff --git a/app/components/layout/Footer/FooterBottom.tsx b/app/components/layout/Footer/FooterBottom.tsx new file mode 100644 index 0000000..5e32054 --- /dev/null +++ b/app/components/layout/Footer/FooterBottom.tsx @@ -0,0 +1,28 @@ +import Link from 'next/link'; + +const FooterBottom = () => { + return ( +
+
+
+

+ Copyright© GRAMENTHEME All Rights Reserved. +

+
    +
  • + Terms & Conditions +
    • +
  • + Privacy Policy +
    • +
  • + Contact Us +
    • +
+
+
+
+ ); +}; + +export default FooterBottom; diff --git a/app/components/layout/Footer/FooterTop.tsx b/app/components/layout/Footer/FooterTop.tsx new file mode 100644 index 0000000..b954267 --- /dev/null +++ b/app/components/layout/Footer/FooterTop.tsx @@ -0,0 +1,55 @@ +import Link from 'next/link'; + +const FooterTop = () => { + return ( +
+
+
+
+
+
+

+ +84 961 83 4040 +

+

734 Luy Ban Bich St, Tan Thanh Ward, Tan Phu Dist, HCMC

+
+ + img + +
    +
  • + Home +
    • +
  • + About Us +
    • +
  • + Visa +
    • +
  • + Pages +
    • +
  • + Article +
    • +
  • + Contact Us +
    • +
+
+ + + + +
+
+
+
+
+
+
+
+ ); +}; + +export default FooterTop; diff --git a/app/components/layout/Header/Header.tsx b/app/components/layout/Header/Header.tsx new file mode 100644 index 0000000..3484090 --- /dev/null +++ b/app/components/layout/Header/Header.tsx @@ -0,0 +1,25 @@ +import HeaderTop from './HeaderTop'; +import HeaderBottom from './HeaderBottom'; + +const Header = () => { + return ( + <> + + + {/* Search Popup - kept here for now as part of header logic/structure */} +
+
+
+
+ + +
+
+
+ + ); +}; + +export default Header; diff --git a/app/components/layout/Header/HeaderBottom.tsx b/app/components/layout/Header/HeaderBottom.tsx new file mode 100644 index 0000000..4b87d29 --- /dev/null +++ b/app/components/layout/Header/HeaderBottom.tsx @@ -0,0 +1,154 @@ +'use client'; + +import Link from 'next/link'; +import HeaderMenu from './HeaderMenu'; + +const homeMegaMenu = ( + <> +
+
+ img +
+ + Multi Page + +
+
+
+

+ Home 01 +

+
+
+
+
+ img +
+ + Multi Page + +
+
+
+

+ Home 02 +

+
+
+
+
+ img +
+ + Multi Page + +
+
+
+

+ Home 03 +

+
+
+ +); + +const menuItems = [ + { + label: 'Home', + href: '/', + megaMenuContent: homeMegaMenu + }, + { + label: 'About Us', + href: '/about' + }, + { + label: 'Pages', + href: '#', + submenu: [ + { + label: 'Service', + href: '#', + submenu: [ + { label: 'Service', href: '/service' }, + { label: 'Service Details', href: '/service-details' } + ] + }, + { + label: 'Country List', + href: '#', + submenu: [ + { label: 'Country List', href: '/country-list' }, + { label: 'Country Details', href: '/country-details' } + ] + }, + { label: 'Our Pricing', href: '/pricing' }, + { label: 'Appointment', href: '/appointment' }, + { label: '404 Page', href: '/404' }, + { label: 'Coming Soon', href: '/coming-soon' } + ] + }, + { + label: 'VISA', + href: '#', + submenu: [ + { label: 'Visa List', href: '/country-list' }, + { label: 'Visa Details', href: '/country-details' } + ] + }, + { + label: 'Blog', + href: '#', + submenu: [ + { label: 'Blog Grid', href: '/news-grid' }, + { label: 'Blog Standard', href: '/news' }, + { label: 'Blog Details', href: '/news-details' } + ] + }, + { + label: 'Contact Us', + href: '/contact' + } +]; + +const HeaderBottom = () => { + return ( +
+
+
+
+
+
+ + logo-img + +
+
+ +
+
+
+
+ + + + + Apply now + + +
+
+ +
+
+
+
+
+
+
+
+ ); +}; + +export default HeaderBottom; diff --git a/app/components/layout/Header/HeaderMenu.tsx b/app/components/layout/Header/HeaderMenu.tsx new file mode 100644 index 0000000..3a083b5 --- /dev/null +++ b/app/components/layout/Header/HeaderMenu.tsx @@ -0,0 +1,68 @@ +import Link from 'next/link'; + +interface MenuItem { + label: string; + href: string; + submenu?: MenuItem[]; + isMegaMenu?: boolean; // For Home demo images if needed, though simple recursion handles most + megaMenuContent?: React.ReactNode; // Flexible slot for complex mega menus +} + +interface HeaderMenuProps { + menuItems: MenuItem[]; +} + +const HeaderMenu: React.FC = ({ menuItems }) => { + return ( +
+ +
+ ); +}; + +export default HeaderMenu; diff --git a/app/components/layout/Header/HeaderTop.tsx b/app/components/layout/Header/HeaderTop.tsx new file mode 100644 index 0000000..50539b5 --- /dev/null +++ b/app/components/layout/Header/HeaderTop.tsx @@ -0,0 +1,63 @@ +import Link from 'next/link'; + +const HeaderTop = () => { + return ( +
+
+
+
+ +
+ +
+
+
+ +
+
+ + English + +
    +
  • + English +
    • +
  • + Bangla +
    • +
  • + Hindi +
    • +
+
+
+
+ + + + +
+
+
+
+
+ ); +}; + +export default HeaderTop; diff --git a/app/home.json b/app/home.json new file mode 100644 index 0000000..f260aed --- /dev/null +++ b/app/home.json @@ -0,0 +1,457 @@ +{ + "header": { + "top": { + "phone": "+09 378 357 5222", + "email": "info@hailearning.edu.vn", + "location": "69 Street, 5th Avenue LA, United States", + "socialLinks": [ + { + "platform": "linkedin", + "url": "https://linkedin.com", + "icon": "fa-brands fa-linkedin" + }, + { + "platform": "twitter", + "url": "https://twitter.com", + "icon": "fa-brands fa-twitter" + }, + { + "platform": "instagram", + "url": "https://instagram.com", + "icon": "fa-brands fa-instagram" + }, + { + "platform": "youtube", + "url": "https://youtube.com", + "icon": "fa-brands fa-youtube" + } + ] + }, + "menu": [ + { + "label": "Home", + "href": "/", + "children": [] + }, + { + "label": "About Us", + "href": "/about", + "children": [] + }, + { + "label": "Pages", + "href": "#", + "children": [ + { + "label": "Service", + "href": "/service", + "children": [ + { + "label": "Service", + "href": "/service" + }, + { + "label": "Service Details", + "href": "/service-details" + } + ] + }, + { + "label": "Country List", + "href": "/country-list", + "children": [ + { + "label": "Country List", + "href": "/country-list" + }, + { + "label": "Country Details", + "href": "/country-details" + } + ] + }, + { + "label": "Our Pricing", + "href": "/pricing" + }, + { + "label": "Appointment", + "href": "/appointment" + } + ] + }, + { + "label": "VISA", + "href": "#", + "children": [ + { + "label": "Visa List", + "href": "/visa-list" + }, + { + "label": "Visa Details", + "href": "/visa-details" + } + ] + }, + { + "label": "Blog", + "href": "#", + "children": [ + { + "label": "Blog Grid", + "href": "/blog-grid" + }, + { + "label": "Blog Standard", + "href": "/blog" + }, + { + "label": "Blog Details", + "href": "/blog-details" + } + ] + }, + { + "label": "Contact Us", + "href": "/contact" + } + ] + }, + "hero": { + "title": "From Application to Visa – We've Got You Covered", + "subtitle": "Global Education Simplified", + "description": "We guide you through every step of the education visa process, from initial application to final approval, ensuring a smooth, hassle-free journey.", + "primaryButton": { + "label": "Apply now", + "href": "/contact" + }, + "secondaryButton": { + "label": "Book Free Consultation", + "href": "/contact" + }, + "backgroundImage": "/assets/img/home-1/hero/bg.jpg", + "videoUrl": "https://www.youtube.com/watch?v=Cn4G2lZ_g2I" + }, + "whyChooseUs": { + "heading": "Turning Study Abroad Dreams Into Reality", + "subheading": "About Our Consultancy", + "description": "We guide students with expert visa consulting, ensuring a smooth process from application to approval, turning study abroad aspirations into life-changing opportunities for a brighter future.", + "items": [ + { + "icon": "/assets/img/home-1/icon/01.svg", + "title": "Global Reach", + "description": "Expanding Opportunities Worldwide" + }, + { + "icon": "/assets/img/home-1/icon/01.svg", + "title": "Expert Guidance", + "description": "Professional Support Every Step" + } + ], + "features": [ + "Fastest Visa form processing with skilled immigration agents", + "Partnership with International Educational Institutions" + ], + "ctaButton": { + "label": "Get Started", + "href": "/about" + } + }, + "visaSolutions": { + "heading": "Comprehensive Visa Solutions", + "subheading": "Our Expert Services", + "items": [ + { + "number": "01", + "title": "Student Visa Guidance", + "description": "Assistance with admission, documentation, and visa application.Assistance", + "link": "/service-details" + }, + { + "number": "02", + "title": "PTE Exam Preparation", + "description": "We provide expert guidance and personalized support throughout the education visa process,", + "link": "/service-details" + }, + { + "number": "03", + "title": "University Selection Assistance", + "description": "We provide expert guidance and personalized support throughout the education visa process,", + "link": "/service-details" + }, + { + "number": "04", + "title": "IELTS Exam Preparation", + "description": "We provide expert guidance and personalized support throughout the education visa process,", + "link": "/service-details" + } + ] + }, + "visaCountries": { + "heading": "Visa & VISAWAY Services To UK", + "subheading": "UK. United Kingdom", + "description": "The Express Entry program is designed for skilled workers who wish to immigrate to Canada. It includes the Federal Skilled Worker Program, the Federal Skilled…", + "countries": [ + { + "name": "United Kingdom", + "code": "UK", + "flag": "/assets/img/home-1/feature/shape.png", + "link": "/country-details/uk", + "visaTypes": [ + "Visitor Visa", + "Student Visa & Admission", + "Work Visa – H1B", + "Business Visa", + "Work permit for Canada", + "Student Visa for Canada" + ] + }, + { + "name": "United States", + "code": "US", + "flag": "/assets/img/flags/us.png", + "link": "/country-details/us", + "visaTypes": [ + "Student Visa F-1", + "Work Visa H1-B", + "Tourist Visa B-2" + ] + }, + { + "name": "Canada", + "code": "CA", + "flag": "/assets/img/flags/canada.png", + "link": "/country-details/canada", + "visaTypes": [ + "Study Permit", + "Work Permit", + "Express Entry" + ] + }, + { + "name": "Australia", + "code": "AU", + "flag": "/assets/img/flags/australia.png", + "link": "/country-details/australia", + "visaTypes": [ + "Student Visa 500", + "Skilled Migration", + "Working Holiday" + ] + }, + { + "name": "Germany", + "code": "DE", + "flag": "/assets/img/flags/germany.png", + "link": "/country-details/germany", + "visaTypes": [ + "Student Visa", + "Job Seeker Visa", + "EU Blue Card" + ] + } + ], + "ctaButton": { + "label": "Get Started", + "href": "/contact" + } + }, + "testimonials": { + "heading": "Student Reviews & Testimonials", + "subheading": "What Our Students Say", + "videoUrl": "https://www.youtube.com/watch?v=Cn4G2lZ_g2I", + "videoThumbnail": "/assets/img/home-1/testimonial/01.jpg", + "items": [ + { + "name": "Sohel Tanvir", + "role": "Student", + "country": "Canada", + "rating": 5, + "comment": "Professional and reliable service. They explained each step clearly, prepared my documents, and supported me during the interview. My visa approval came faster than expected.", + "avatar": "/assets/img/home-1/testimonial/client.png" + }, + { + "name": "Ayesha Rahman", + "role": "Student", + "country": "UK. United Kingdom", + "rating": 5, + "comment": "The consultancy guided me from start to finish, making my study abroad journey smooth and stress-free. Thanks to their expert support, I secured my visa successfully.", + "avatar": "/assets/img/home-1/testimonial/client-2.png" + }, + { + "name": "Michael Chen", + "role": "Graduate Student", + "country": "Australia", + "rating": 5, + "comment": "Outstanding service from beginning to end. The team was knowledgeable, responsive, and made the entire visa process seamless. Highly recommend to anyone planning to study abroad.", + "avatar": "/assets/img/home-1/testimonial/client.png" + } + ] + }, + "videoGallery": { + "heading": "VIDEO PLAY GALLERY", + "videoUrl": "https://ex-coders.com/vdo/visa.mp4", + "thumbnail": "/assets/img/home-1/feature/text.png" + }, + "faq": { + "heading": "Got Questions? We've Got Answers", + "subheading": "Visa FAQs", + "description": "We understand students often have many questions about studying abroad. Our experts provide clear.", + "ctaButton": { + "label": "contact us", + "href": "/contact" + }, + "items": [ + { + "question": "How long does the student visa process usually take?", + "answer": "The student visa process typically takes 4-8 weeks depending on the country and time of year. We recommend starting the application process at least 3 months before your intended travel date to ensure sufficient time for document preparation and processing." + }, + { + "question": "Do you assist with scholarship applications as well?", + "answer": "Yes, we guide students in identifying suitable scholarships, preparing strong applications, and increasing chances of securing financial aid for their studies abroad." + }, + { + "question": "Will you guide me in preparing for the visa interview?", + "answer": "Absolutely! We provide comprehensive visa interview preparation, including mock interviews, document review, and tips on how to answer common questions confidently and effectively." + }, + { + "question": "Do you offer post-arrival support for students?", + "answer": "Yes, we provide post-arrival support including airport pickup coordination, accommodation assistance, university orientation guidance, and ongoing support throughout your study period." + }, + { + "question": "What documents are required for a student visa application?", + "answer": "Required documents typically include a valid passport, university acceptance letter, proof of financial support, academic transcripts, language proficiency test scores, and health insurance. We provide a complete checklist tailored to your destination country." + } + ] + }, + "achievements": { + "heading": "Our Achievements in Numbers", + "subheading": "Did You Know", + "items": [ + { + "value": "1000", + "suffix": "k+", + "label": "Students Guided", + "description": "Successfully assisted over a thousand students worldwide." + }, + { + "value": "50", + "suffix": "+", + "label": "Countries Covered", + "description": "Helping students apply to universities in more than 50 countries." + }, + { + "value": "95", + "suffix": "%", + "label": "Visa Success Rate", + "description": "Inspired students to reach their goals globally" + }, + { + "value": "10", + "suffix": "+", + "label": "Years of Experience", + "description": "Trusted experts in global education consulting." + } + ] + }, + "partners": { + "heading": "Our Trusted Partners", + "items": [ + { + "name": "Best Visa Consultancy", + "logo": "/assets/img/home-1/feature/icon-1.png", + "year": "2025" + }, + { + "name": "Visa Success Award", + "logo": "/assets/img/home-1/feature/icon-2.png", + "year": "2025" + }, + { + "name": "Innovation Award", + "logo": "/assets/img/home-1/feature/icon-3.png", + "year": "2025" + }, + { + "name": "Global Education Partner", + "logo": "/assets/img/home-1/feature/icon-4.png", + "year": "2025" + }, + { + "name": "University Partner 1", + "logo": "/assets/img/home-1/brand/01.png", + "year": "2025" + }, + { + "name": "University Partner 2", + "logo": "/assets/img/home-1/brand/02.png", + "year": "2025" + }, + { + "name": "University Partner 3", + "logo": "/assets/img/home-1/brand/03.png", + "year": "2025" + }, + { + "name": "University Partner 4", + "logo": "/assets/img/home-1/brand/04.png", + "year": "2025" + }, + { + "name": "University Partner 5", + "logo": "/assets/img/home-1/brand/05.png", + "year": "2025" + } + ] + }, + "blogPreview": { + "heading": "Latest Insights & Updates", + "subheading": "Visa Tips & Guides", + "ctaButton": { + "label": "view all articles", + "href": "/blog" + }, + "items": [ + { + "title": "Step-by-Step Guide to Applying for a Student Visa", + "excerpt": "Learn the complete process of applying for a student visa, from gathering documents to attending your interview. Our comprehensive guide covers everything you need to know.", + "category": "Student Visa", + "date": "2025-08-20", + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "comments": 8, + "link": "/blog/step-by-step-guide-student-visa", + "thumbnail": "/assets/img/home-1/news/news-1.jpg" + }, + { + "title": "Tips to Prepare Financial Documents for Visa Approval", + "excerpt": "Financial documentation is crucial for visa approval. Discover expert tips on preparing bank statements, sponsorship letters, and proof of funds that meet embassy requirements.", + "category": "IELTS / TOEFL", + "date": "2025-08-20", + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "comments": 8, + "link": "/blog/financial-documents-visa-approval", + "thumbnail": "/assets/img/home-1/news/news-2.jpg" + }, + { + "title": "Post-Arrival Guide What Every Student Should Know", + "excerpt": "Moving to a new country can be overwhelming. Our post-arrival guide helps international students navigate accommodation, banking, healthcare, and cultural adaptation successfully.", + "category": "Study Abroad", + "date": "2025-08-20", + "author": { + "name": "Sohel", + "avatar": "/assets/img/home-1/news/client.png" + }, + "comments": 8, + "link": "/blog/post-arrival-guide-students", + "thumbnail": "/assets/img/home-1/news/news-3.jpg" + } + ] + } +} diff --git a/app/layout.tsx b/app/layout.tsx index 4619a98..7756023 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,14 +1,16 @@ import type { Metadata } from "next"; -import "./globals.css"; - -import Header from "./components/Header"; -import Footer from "./components/Footer"; import Script from "next/script"; +// Import global styles locally if needed, but linking via head is safer for legacy assets +// import "./globals.css"; + +import Header from "./components/layout/Header/Header"; +import Footer from "./components/layout/Footer/Footer"; +import Preloader from "./components/common/Preloader"; + export const metadata: Metadata = { - title: "VisaService - Dịch vụ visa uy tín", - description: - "Dịch vụ visa chuyên nghiệp với tỷ lệ thành công 99%. Hỗ trợ visa cho hơn 50 quốc gia.", + title: "Visaway – Immigration & Visa Consulting HTML Template", + description: "Visaway – Immigration & Visa Consulting HTML Template", }; export default function RootLayout({ @@ -17,25 +19,50 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + - {/* Nhúng các file CSS template như news.html */} + {/* Favicon */} + + {/* Bootstrap min.css */} + {/* All Min Css */} + {/* Animate.css */} + {/* Magnific Popup.css */} + {/* MeanMenu.css */} + {/* Odometer.css */} + {/* Swiper Bundle.css */} + {/* Nice Select.css */} + {/* Main.css */} - + + + + + {/* Mouse Cursor */} +
+
+ + {/* Back To Top */} + +
-
{children}
+ + {children} +