Merge pull request 'feat: Add news page' (#1) from fea/thanh-02022026-news into main

Reviewed-on: UKSOURCE/hailearning.edu.vn#1

app/blog/components/Breadcrumb.tsx

@@ -0,0 +1,23 @@
+export default function Breadcrumb() {
+  return (
+    <section className="breadcrumb-wrapper fix bg-cover" style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}>
+      <div className="shape">
+        <img src="/assets/img/inner-page/shape.png" alt="img" />
+      </div>
+      <div className="container">
+        <div className="page-heading">
+          <h1 className="breadcrumb-title">Blog Stardard</h1>
+          <ul className="breadcrumb-list">
+            <li>
+              <a href="/">Home</a>
+            </li>
+            <li>
+              <i className="fa-solid fa-chevron-right"></i>
+            </li>
+            <li>Blog Stardard</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

app/blog/components/NewsList.tsx

@@ -0,0 +1,90 @@
+export default function NewsList() {
+  return (
+    <div className="col-lg-8 col-12">
+      {/* News Post 1 */}
+      <div className="news-standard-post">
+        <div className="news-image">
+          <img src="/assets/img/home-1/news/news-13.jpg" alt="img" />
+        </div>
+        <div className="news-content">
+          <ul className="news-list">
+            <li>
+              <i className="fa-solid fa-user"></i> By Admin
+            </li>
+            <li>
+              <i className="fa-solid fa-calendar-days"></i> 11 March 2025
+            </li>
+            <li>
+              <i className="fa-solid fa-comments"></i> 0 Comments
+            </li>
+          </ul>
+          <h3>
+            <a href="/news-details">How to Avoid Common Mistakes in Visa Applications</a>
+          </h3>
+          <p>
+            A business consultant provides expert guidance, strategic planning, and problem-solving support—helping startups avoid mistakes, grow faster, and operate more efficiently from day one.
+          </p>
+          <a href="/news-details" className="theme-btn">
+            VIEW MORE <i className="fa-solid fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+      {/* News Post 2 */}
+      <div className="news-standard-post">
+        <div className="news-image">
+          <img src="/assets/img/home-1/news/news-14.jpg" alt="img" />
+        </div>
+        <div className="news-content">
+          <ul className="news-list">
+            <li>
+              <i className="fa-solid fa-user"></i> By Admin
+            </li>
+            <li>
+              <i className="fa-solid fa-calendar-days"></i> 11 March 2025
+            </li>
+            <li>
+              <i className="fa-solid fa-comments"></i> 0 Comments
+            </li>
+          </ul>
+          <h3>
+            <a href="/news-details">The Role of Immigration Consultants in Your Journey</a>
+          </h3>
+          <p>
+            Immigration consultants play a vital role in guiding applicants, simplifying complex processes, offering expert advice, and ensuring successful outcomes for study, work, or permanent residency abroad.
+          </p>
+          <a href="/news-details" className="theme-btn">
+            VIEW MORE <i className="fa-solid fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+      {/* News Post 3 */}
+      <div className="news-standard-post mb-0">
+        <div className="news-image">
+          <img src="/assets/img/home-1/news/news-15.jpg" alt="img" />
+        </div>
+        <div className="news-content">
+          <ul className="news-list">
+            <li>
+              <i className="fa-solid fa-user"></i> By Admin
+            </li>
+            <li>
+              <i className="fa-solid fa-calendar-days"></i> 11 March 2025
+            </li>
+            <li>
+              <i className="fa-solid fa-comments"></i> 0 Comments
+            </li>
+          </ul>
+          <h3>
+            <a href="/news-details">Latest Immigration Policy Updates You Should Know</a>
+          </h3>
+          <p>
+            Stay informed with the latest immigration policy updates, ensuring you understand new rules, visa requirements, and opportunities that impact your study, work, or migration journey abroad.
+          </p>
+          <a href="/news-details" className="theme-btn">
+            VIEW MORE <i className="fa-solid fa-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

app/blog/components/NewsSection.tsx

@@ -0,0 +1,17 @@
+import NewsList from "./NewsList";
+import Sidebar from "./Sidebar";
+
+export default function NewsSection() {
+  return (
+    <section className="news-standard-section section-padding fix">
+      <div className="container">
+        <div className="news-standard-wrapper">
+          <div className="row g-4">
+            <NewsList />
+            <Sidebar />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/blog/components/Sidebar.tsx

@@ -0,0 +1,97 @@
+export default function Sidebar() {
+  return (
+    <div className="col-lg-4 col-12">
+      <div className="main-sideber">
+        {/* Search Widget */}
+        <div className="news-sideber-box">
+          <div className="search-widget">
+            <form action="#">
+              <input type="text" placeholder="Search Blog" />
+              <button type="submit">
+                <i className="fa-solid fa-magnifying-glass"></i>
+              </button>
+            </form>
+          </div>
+        </div>
+        {/* Categories */}
+        <div className="news-sideber-box">
+          <div className="wid-title">
+            <h3>Cetegories</h3>
+          </div>
+          <div className="news-widget-categories">
+            <ul>
+              <li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Permanent Residency (PR)</a><span>(04)</span></li>
+              <li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Immigration Policy Updates</a><span>(09)</span></li>
+              <li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Scholarships & Grants</a><span>(00)</span></li>
+              <li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Citizenship & Naturalization</a><span>(04)</span></li>
+              <li><a href="/news-details"><i className="fa-solid fa-chevrons-right"></i> Visa Interview Preparation</a><span>(01)</span></li>
+            </ul>
+          </div>
+        </div>
+        {/* Recent Post */}
+        <div className="news-sideber-box">
+          <div className="wid-title">
+            <h3>Recent Post</h3>
+          </div>
+          <div className="recent-post-area">
+            <div className="recent-items">
+              <div className="recent-thumb">
+                <img src="/assets/img/inner-page/news-details/post-1.jpg" alt="img" />
+              </div>
+              <div className="recent-content">
+                <h6>
+                  <a href="/news-details">Top Countries for Higher Education in 2025</a>
+                </h6>
+                <ul>
+                  <li>March 26, 2025</li>
+                </ul>
+              </div>
+            </div>
+            <div className="recent-items">
+              <div className="recent-thumb">
+                <img src="/assets/img/inner-page/news-details/post-2.jpg" alt="img" />
+              </div>
+              <div className="recent-content">
+                <h6>
+                  <a href="/news-details">The Benefits of Hiring a Visa Consultant</a>
+                </h6>
+                <ul>
+                  <li>March 26, 2025</li>
+                </ul>
+              </div>
+            </div>
+            <div className="recent-items">
+              <div className="recent-thumb">
+                <img src="/assets/img/inner-page/news-details/post-3.jpg" alt="img" />
+              </div>
+              <div className="recent-content">
+                <h6>
+                  <a href="/news-details">How to Prepare for Your Immigration Interview</a>
+                </h6>
+                <ul>
+                  <li>March 26, 2025</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Tag Cloud */}
+        <div className="news-sideber-box mb-0">
+          <div className="wid-title">
+            <h3>Tag Cloud</h3>
+          </div>
+          <div className="news-widget-categories">
+            <div className="tagcloud">
+              <a href="/news-details">WorkVisa</a>
+              <a href="/news-details">FamilyVisa</a>
+              <a href="/news-details">StudentVisa</a>
+              <a href="/news-details">VisaUpdates</a>
+              <a href="/news-details">TravelVisa</a>
+              <a href="/news-details">StudyAbroad</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/blog/page.tsx

@@ -1,144 +1,11 @@
-"use client";
-
-import { useState } from "react";
-import blogData from "./blog.json";
-
-export default function BlogPage() {
-  const [selectedCategory, setSelectedCategory] = useState("all");
-
-  const filteredPosts =
-    selectedCategory === "all"
-      ? blogData.posts
-      : blogData.posts.filter(
-          (post) => post.category.toLowerCase() === selectedCategory,
-        );
+import Breadcrumb from "./components/Breadcrumb";
+import NewsSection from "./components/NewsSection";
 
+export default function NewsPage() {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-6xl mx-auto">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {blogData.title}
-          </h1>
-          <p className="text-xl text-gray-600">{blogData.subtitle}</p>
-        </div>
-
-        {/* Featured Post */}
-        <div className="mb-12">
-          <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg p-8 text-white">
-            <div className="flex items-center mb-4">
-              <span className="bg-yellow-400 text-black px-3 py-1 rounded-full text-sm font-medium mr-4">
-                Nổi bật
-              </span>
-              <span className="text-blue-100">
-                {blogData.featured.category}
-              </span>
-            </div>
-            <h2 className="text-3xl font-bold mb-4">
-              {blogData.featured.title}
-            </h2>
-            <p className="text-blue-100 mb-6 text-lg">
-              {blogData.featured.excerpt}
-            </p>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center text-blue-100">
-                <span className="mr-4">👤 {blogData.featured.author}</span>
-                <span className="mr-4">📅 {blogData.featured.date}</span>
-                <span>⏱️ {blogData.featured.readTime}</span>
-              </div>
-              <button className="bg-white text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition-colors">
-                Đọc thêm
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Category Filter */}
-        <div className="mb-8">
-          <div className="flex flex-wrap gap-4 justify-center">
-            {blogData.categories.map((category) => (
-              <button
-                key={category.slug}
-                onClick={() => setSelectedCategory(category.slug)}
-                className={`px-6 py-2 rounded-full transition-colors ${
-                  selectedCategory === category.slug
-                    ? "bg-blue-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                }`}
-              >
-                {category.name} ({category.count})
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Blog Posts Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredPosts.map((post) => (
-            <article
-              key={post.id}
-              className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
-            >
-              {/* Post Image */}
-              <div className="h-48 bg-gray-200 flex items-center justify-center">
-                <span className="text-gray-400">📷 {post.category}</span>
-              </div>
-
-              {/* Post Content */}
-              <div className="p-6">
-                {/* Category & Date */}
-                <div className="flex items-center justify-between mb-3">
-                  <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">
-                    {post.category}
-                  </span>
-                  <span className="text-gray-500 text-sm">{post.date}</span>
-                </div>
-
-                {/* Title */}
-                <h3 className="text-xl font-semibold text-gray-900 mb-3 line-clamp-2">
-                  {post.title}
-                </h3>
-
-                {/* Excerpt */}
-                <p className="text-gray-700 mb-4 line-clamp-3">
-                  {post.excerpt}
-                </p>
-
-                {/* Tags */}
-                <div className="flex flex-wrap gap-2 mb-4">
-                  {post.tags.map((tag, index) => (
-                    <span
-                      key={index}
-                      className="bg-gray-100 text-gray-600 px-2 py-1 rounded text-xs"
-                    >
-                      #{tag}
-                    </span>
-                  ))}
-                </div>
-
-                {/* Meta Info */}
-                <div className="flex items-center justify-between text-sm text-gray-500">
-                  <span>👤 {post.author}</span>
-                  <span>⏱️ {post.readTime}</span>
-                </div>
-
-                {/* Read More Button */}
-                <button className="w-full mt-4 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors">
-                  Đọc thêm
-                </button>
-              </div>
-            </article>
-          ))}
-        </div>
-
-        {/* Load More */}
-        <div className="text-center mt-12">
-          <button className="bg-gray-100 text-gray-700 px-8 py-3 rounded-lg hover:bg-gray-200 transition-colors">
-            Xem thêm bài viết
-          </button>
-        </div>
-      </div>
-    </div>
+    <>
+      <Breadcrumb />
+      <NewsSection />
+    </>
   );
 }

app/globals.css

@@ -1,26 +1 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

app/layout.tsx

@@ -1,18 +1,9 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+
 import Header from "./components/Header";
 import Footer from "./components/Footer";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import Script from "next/script";
 
 export const metadata: Metadata = {
   title: "VisaService - Dịch vụ visa uy tín",
@@ -27,12 +18,39 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="vi">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-50`}
-      >
+      <head>
+        {/* Nhúng các file CSS template như news.html */}
+        <link rel="shortcut icon" href="/assets/img/favicon.png" />
+        <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="/assets/css/all.min.css" />
+        <link rel="stylesheet" href="/assets/css/animate.css" />
+        <link rel="stylesheet" href="/assets/css/magnific-popup.css" />
+        <link rel="stylesheet" href="/assets/css/meanmenu.css" />
+        <link rel="stylesheet" href="/assets/css/odometer.css" />
+        <link rel="stylesheet" href="/assets/css/swiper-bundle.min.css" />
+        <link rel="stylesheet" href="/assets/css/nice-select.css" />
+        <link rel="stylesheet" href="/assets/css/main.css" />
+      </head>
+      <body className={`antialiased bg-gray-50`}>
         <Header />
         <main className="min-h-screen">{children}</main>
         <Footer />
+        {/* Nhúng các script JS giống news.html */}
+        <Script src="/assets/js/jquery-3.7.1.min.js" strategy="beforeInteractive" />
+        <Script src="/assets/js/viewport.jquery.js" strategy="afterInteractive" />
+        <Script src="/assets/js/bootstrap.bundle.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/jquery.nice-select.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/jquery.waypoints.js" strategy="afterInteractive" />
+        <Script src="/assets/js/odometer.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/swiper-bundle.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/jquery.meanmenu.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/jquery.magnific-popup.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/wow.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/gsap.js" strategy="afterInteractive" />
+        <Script src="/assets/js/lenis.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/ScrollTrigger.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/SplitText.min.js" strategy="afterInteractive" />
+        <Script src="/assets/js/main.js" strategy="afterInteractive" />
       </body>
     </html>
   );

public/assets/img/home-1/icon/01.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_405_45874)">
+<path d="M13.1588 19.7266C12.6081 19.8683 12.0306 19.9436 11.4356 19.9436C10.2384 19.9436 9.11249 19.6386 8.13126 19.1021C8.17106 17.5984 9.16284 16.9599 10.9394 18.1623C11.7528 18.7129 12.8715 16.9469 13.1588 19.7266ZM13.8425 19.5117C14.1554 19.3952 14.4576 19.2566 14.7471 19.0979L14.7202 18.7269C14.6219 17.369 14.7801 17.0202 13.8554 15.9021C13.4081 15.3614 12.7436 14.5168 13.0721 13.7709C13.3284 13.1892 13.9607 13.0774 14.5195 12.9916C14.8212 12.9452 15.2974 12.8857 15.5554 12.7153C15.8156 12.5434 15.8096 12.2072 15.7796 11.9277C15.7514 11.6653 15.5964 11.4945 15.4021 11.3304C15.0712 11.0511 14.6836 10.832 14.3447 10.5526C13.0131 9.45442 13.1151 8.03448 13.7154 6.53875L13.717 6.53486C13.0028 6.28464 12.2352 6.14809 11.4356 6.14809C10.4291 6.14809 9.47301 6.36386 8.61084 6.75132L8.64716 6.86786C8.91777 7.73575 9.79874 7.77995 10.5699 7.77395C10.975 7.77081 11.5223 7.71807 11.9076 7.82036C12.3068 7.92634 12.6021 8.22803 12.6203 8.653C12.6343 8.97798 12.4722 9.27259 12.286 9.52656C11.6961 10.3314 11.8082 11.2096 12.0235 12.1204C12.1221 12.5378 12.266 13.021 12.2561 13.4495C12.2403 14.1285 11.8208 14.5759 11.1477 14.6683C10.5743 14.747 10.1864 14.3864 9.88706 13.9539C9.84046 13.8866 9.73452 13.7165 9.64068 13.5884C9.57904 13.7017 9.51402 13.8349 9.47479 13.899C9.20404 14.3406 8.80537 14.6145 8.26645 14.5624C7.95918 14.5327 7.69729 14.4122 7.45846 14.2208C7.41346 14.1848 7.36284 14.1358 7.31287 14.0897C7.30279 14.0979 7.2906 14.1085 7.28071 14.1186C7.29341 14.2072 7.36973 14.3896 7.39565 14.4528C7.51766 14.7505 7.63649 15.0316 7.71552 15.3457C7.98313 16.4092 7.68834 17.3647 7.09457 18.2611L7.03232 18.3551C7.1706 18.4699 7.31343 18.5794 7.46048 18.6833C7.55971 17.9567 7.89206 17.268 8.61435 16.968C9.53099 16.5872 10.563 17.0602 11.3245 17.5739C11.3896 17.5793 11.5585 17.5342 11.6135 17.52C11.8905 17.4485 12.1454 17.3822 12.4362 17.4101C13.4758 17.5103 13.7397 18.6395 13.8425 19.5117ZM23.0616 2.7152L21.4076 0.606387C21.1902 0.329121 20.77 0.329121 20.5526 0.606387L18.8986 2.7152C18.7585 2.89384 18.8853 3.15451 19.1123 3.15451H19.9689V13.0458C19.9689 17.7588 16.1486 21.5791 11.4356 21.5791C6.72262 21.5791 2.90235 17.7588 2.90235 13.0458C2.90235 8.33284 6.72266 4.51257 11.4356 4.51257C13.7921 4.51257 15.9254 5.4677 17.4696 7.01186V4.38395C15.7594 3.19032 13.6793 2.49015 11.4356 2.49015C5.60605 2.49015 0.879883 7.21628 0.879883 13.0459C0.879883 18.8755 5.6061 23.6016 11.4356 23.6016C17.2652 23.6016 21.9913 18.8755 21.9913 13.0459V3.15456H22.8479C23.0746 3.15456 23.2018 2.89384 23.0616 2.7152ZM7.97591 7.0772C5.92016 8.27139 4.53787 10.4972 4.53787 13.0458C4.53787 14.9251 5.28941 16.6289 6.50835 17.8729C8.1643 15.3729 5.7674 14.42 6.88541 13.5311C7.63677 12.9338 7.67127 13.7986 8.33404 13.8626C9.04288 13.9311 8.94023 12.7144 9.6532 12.7662C10.2659 12.8107 10.4894 14.049 11.0521 13.9718C12.5248 13.7696 10.1229 11.2886 11.7189 9.11096C12.8573 7.55771 8.77874 9.65181 7.97591 7.0772ZM18.3334 13.0458C18.3334 10.2849 16.7112 7.90276 14.368 6.80064C12.8853 10.4949 16.2779 9.98101 16.4787 11.8527C16.8122 14.9609 11.8994 12.4343 14.3971 15.454C15.4796 16.7627 15.3216 17.2965 15.4215 18.6761C17.1835 17.4264 18.3334 15.3704 18.3334 13.0458Z" fill="#0048B4"/>
+</g>
+<defs>
+<clipPath id="clip0_405_45874">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/img/home-2/icon/02.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8386 10.4077C12.2913 10.762 11.6555 10.9494 11 10.9494C10.3446 10.9494 9.70879 10.762 9.16145 10.4077L0.14648 4.57159C0.0964648 4.53922 0.0477383 4.50546 0 4.47075V14.0339C0 15.1303 0.916309 16.0005 2.02525 16.0005H19.9747C21.1038 16.0005 22 15.1107 22 14.0339V4.4707C21.9521 4.5055 21.9033 4.53934 21.8532 4.57176L12.8386 10.4077Z" fill="#0048B4"/>
+<path d="M0.861523 3.52956L9.8765 9.36573C10.2178 9.58666 10.6089 9.69711 11 9.69711C11.3911 9.69711 11.7822 9.58662 12.1235 9.36573L21.1385 3.52956C21.6779 3.18053 22 2.59639 22 1.96593C22 0.881889 21.0918 0 19.9754 0H2.02456C0.908231 4.17245e-05 0 0.881931 0 1.96698C0 2.59639 0.322094 3.18053 0.861523 3.52956Z" fill="#0048B4"/>
+</svg>