forked from UKSOURCE/hailearning.edu.vn
featL Add news page
This commit is contained in:
Wini_Fy
23
app/blog/components/Breadcrumb.tsx
Normal file
23
app/blog/components/Breadcrumb.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
90
app/blog/components/NewsList.tsx
Normal file
90
app/blog/components/NewsList.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
17
app/blog/components/NewsSection.tsx
Normal file
17
app/blog/components/NewsSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
97
app/blog/components/Sidebar.tsx
Normal file
97
app/blog/components/Sidebar.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user