minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

refactor ui and json data about

Browse Source
This commit is contained in:
Le Nhut Huy
2026-02-02 22:29:31 +07:00
parent bf652a64b6
commit 1add9d4d9d
11 changed files with 344 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
app/components/about/AboutNews.tsx
View File

@@ -1,63 +1,48 @@
import Link from 'next/link';
import Link from "next/link";
import { AboutData } from "../../about/types";
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'
}
];
interface AboutNewsProps {
data: AboutData["news"];
}
const AboutNews = ({ data }: AboutNewsProps) => {
return (
<section className="news-section section-padding fix pt-0">
<div className="container">
<div className="section-title-area">
<div className="section-title">
<span className="sub-title">Visa Tips &amp; Guides</span>
<h2 className="split-text-right split-text-in-right">
Latest Insights &amp; Updates
</h2>
<span className="sub-title">{data.subheading}</span>
<h2 className="split-text-right split-text-in-right">{data.heading}</h2>
</div>
<Link href="/news" className="theme-btn">
view all articies
<Link href={data.ctaButton.href} className="theme-btn">
{data.ctaButton.label}
<i className="fa-solid fa-arrow-right"></i>
</Link>
</div>
<div className="row">
{newsItems.map((item, index) => (
{data.items.map((item, index) => (
<div key={index} className="col-xl-4 col-lg-6 col-md-6">
<div className="news-card-item">
<div className="news-image">
<img src={item.image} alt="img" />
<img src={item.thumbnail} alt="img" />
<span>{item.category}</span>
<div className="news-layer-wrapper">
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
<div className="news-layer-image" style={{ backgroundImage: `url('${item.image}')` }}></div>
<div
className="news-layer-image"
style={{ backgroundImage: `url('${item.thumbnail}')` }}
></div>
<div
className="news-layer-image"
style={{ backgroundImage: `url('${item.thumbnail}')` }}
></div>
<div
className="news-layer-image"
style={{ backgroundImage: `url('${item.thumbnail}')` }}
></div>
<div
className="news-layer-image"
style={{ backgroundImage: `url('${item.thumbnail}')` }}
></div>
</div>
</div>
<div className="news-content">
@@ -66,16 +51,14 @@ const AboutNews = () => {
<span>_ {item.date}</span>
</div>
<h3>
<Link href="/news-details">
{item.title}
</Link>
<Link href={item.link}>{item.title}</Link>
</h3>
<div className="news-bottom">
<div className="info-item">
<img src={item.authorImage} alt="img" />
<span>By {item.author}</span>
<img src={item.author.avatar} alt="img" />
<span>By {item.author.name}</span>
</div>
<Link href="/news-details" className="link-btn">
<Link href={item.link} className="link-btn">
View Articles<i className="fa-solid fa-arrow-right"></i>
</Link>
</div>