Skip to content

V
VCCI-News
Commit 3a744f98 authored by Phạm Quang Bảo's avatar Phạm Quang Bảo
Browse files
Options

Merge branch 'tumlumtumla' into 'develop' 

Tumlumtumla

See merge request !11
parents 5ca290c8 b9ec0614
Hide whitespace changes
Inline Side-by-side
Showing with 458 additions and 459 deletions
src/app/(main)/(home)/page.tsx
View file @ 3a744f98
...@@ -69,525 +69,524 @@ const Page = () => { ...@@ -69,525 +69,524 @@ const Page = () => {
'/home/hoi-vien-tieu-bieu/UOB-logo_Vuong.jpeg.webp', '/home/hoi-vien-tieu-bieu/UOB-logo_Vuong.jpeg.webp',
] ]
if (isLoadingNews || isLoadingCategory || isLoadingEvent) return (
return ( isLoadingNews || isLoadingCategory || isLoadingEvent ? (
<div className="w-full h-[80vh] flex justify-center items-center"> <div className="container w-full h-[80vh] flex justify-center items-center">
<Spinner /> <Spinner />
</div> </div>
) ) : (
<>
return ( {/* Banner */}
<> <Swiper
{/* Banner */} modules={[Autoplay]}
<Swiper autoplay={{ delay: 4000, disableOnInteraction: false }}
modules={[Autoplay]} loop
autoplay={{ delay: 4000, disableOnInteraction: false }} slidesPerView={1}
loop onSwiper={(s) => (swiperRef.current = s)}
slidesPerView={1} onSlideChange={(s) =>
onSwiper={(s) => (swiperRef.current = s)} setCurrentIndex(typeof s.realIndex === 'number' ? s.realIndex : s.activeIndex)
onSlideChange={(s) => }
setCurrentIndex(typeof s.realIndex === 'number' ? s.realIndex : s.activeIndex) >
} <SwiperSlide>
> <img
<SwiperSlide> src="https://vcci-hcm.org.vn/wp-content/uploads/2025/10/1.1.-Hero-Banner-CEO-2025-Bi-Sai-Nam-2025-Nhe-2560x720-Px.jpg"
<img alt="Banner"
src="https://vcci-hcm.org.vn/wp-content/uploads/2025/10/1.1.-Hero-Banner-CEO-2025-Bi-Sai-Nam-2025-Nhe-2560x720-Px.jpg" className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
alt="Banner" />
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover" </SwiperSlide>
/> <SwiperSlide>
</SwiperSlide> <img
<SwiperSlide> src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png"
<img alt="Banner"
src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png" className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
alt="Banner" />
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover" </SwiperSlide>
/> </Swiper>
</SwiperSlide>
</Swiper>
<div className="container mx-auto px-3 sm:px-6 lg:px-10 space-y-12"> <div className="container mx-auto px-3 sm:px-6 lg:px-10 space-y-12">
{/* Featured News */} {/* Featured News */}
<section> <section>
<div className="flex flex-col items-center py-8 text-center"> <div className="flex flex-col items-center py-8 text-center">
<h1 className="text-app-blue text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-blue-900"> <h1 className="text-app-blue text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-blue-900">
Tin Nổi Bật Tin Nổi Bật
</h1> </h1>
<div className="w-16 h-[3px] bg-blue-900 mt-2 rounded-full"></div> <div className="w-16 h-[3px] bg-blue-900 mt-2 rounded-full"></div>
</div>
<Swiper
modules={[Autoplay]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
breakpoints={{
0: { slidesPerView: 1.1, spaceBetween: 10 },
640: { slidesPerView: 2, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="pb-5"
>
{rows.map((news) => (
<SwiperSlide key={news.id}>
<a
href={`/${news.id}`}
className="relative block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full aspect-3/2 sm:h-56 md:h-64 object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
<p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
{news.title}
</p>
</div>
</a>
</SwiperSlide>
))}
</Swiper>
</section>
<div>
<a href="https://hardwaretools.com.vn/">
<img src="/home/Standard-Banner-1-2024.png.webp" alt="banner" />
</a>
</div>
{/* Tin tức + Liên kết nhanh */}
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
{/* Left */}
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/thong-tin-truyen-thong/tin-vcci/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Tin tức
</a>
<a href="/thong-tin-truyen-thong/tin-vcci/" className="text-blue-900 text-sm sm:text-base">
{'>>'}
</a>
</div> </div>
<hr className="border-blue-900 mb-4" />
<div className="flex flex-col md:flex-row gap-5"> <Swiper
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => ( modules={[Autoplay]}
<a autoplay={{ delay: 4000, disableOnInteraction: false }}
key={news.id} loop
href={`${news.id}`} breakpoints={{
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3" 0: { slidesPerView: 1.1, spaceBetween: 10 },
> 640: { slidesPerView: 2, spaceBetween: 16 },
<div className="w-full aspect-3/2 overflow-hidden"> 1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="pb-5"
>
{rows.map((news) => (
<SwiperSlide key={news.id}>
<a
href={`/${news.id}`}
className="relative block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title} alt={news.title}
className="w-full h-full object-cover" className="w-full aspect-3/2 sm:h-56 md:h-64 object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}}
/> />
</div> <div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
<p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
{news.title}
</p>
</div>
</a>
</SwiperSlide>
))}
</Swiper>
</section>
<div className="flex-1"> <div>
<p className="text-[#0056b3] font-bold text-xl line-clamp-2"> <a href="https://hardwaretools.com.vn/">
{news.title} <img src="/home/Standard-Banner-1-2024.png.webp" alt="banner" />
</p> </a>
<p className="text-gray-500 text-sm my-1"> </div>
{dayjs(news.release_at).format('DD/MM/YYYY')}
</p> {/* Tin tức + Liên kết nhanh */}
<AppEditorContent className="line-clamp-4" value={news.description} /> <section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
</div> {/* Left */}
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/thong-tin-truyen-thong/tin-vcci/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Tin tức
</a> </a>
))} <a href="/thong-tin-truyen-thong/tin-vcci/" className="text-blue-900 text-sm sm:text-base">
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-4" />
<div className="w-full md:w-1/2"> <div className="flex flex-col md:flex-row gap-5">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-3"> {newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<button <a
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${tab === 'all' key={news.id}
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold' href={`${news.id}`}
: 'border-gray-300 bg-white hover:bg-gray-50' className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
}`}
onClick={() => setTab('all')}
> >
Tất cả <div className="w-full aspect-3/2 overflow-hidden">
</button> <img
{categoryData?.responseData.rows.slice(0, 3).map((category) => ( src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}}
/>
</div>
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{news.title}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
<AppEditorContent className="line-clamp-4" value={news.description} />
</div>
</a>
))}
<div className="w-full md:w-1/2">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-3">
<button <button
key={category.id} className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${tab === 'all'
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${category.name === tab
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold' ? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold'
: 'border-gray-300 bg-white hover:bg-gray-50' : 'border-gray-300 bg-white hover:bg-gray-50'
}`} }`}
onClick={() => setTab(category.name)} onClick={() => setTab('all')}
> >
{category.name} Tất cả
</button> </button>
{categoryData?.responseData.rows.slice(0, 3).map((category) => (
<button
key={category.id}
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${category.name === tab
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold'
: 'border-gray-300 bg-white hover:bg-gray-50'
}`}
onClick={() => setTab(category.name)}
>
{category.name}
</button>
))}
</div>
{filteredRows.slice(0, 4).map((news) => (
<CardNews key={news.id} news={news} />
))} ))}
</div> </div>
{filteredRows.slice(0, 4).map((news) => (
<CardNews key={news.id} news={news} />
))}
</div> </div>
</div> </div>
</div>
{/* Right */} {/* Right */}
<aside className="w-full lg:w-[30%]"> <aside className="w-full lg:w-[30%]">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Liên kết nhanh Liên kết nhanh
</h2> </h2>
<a href="#" className="text-blue-900 text-sm sm:text-base"> <a href="#" className="text-blue-900 text-sm sm:text-base">
{'>>'} {'>>'}
</a>
</div>
<hr className="border-blue-900 mb-4" />
<div className="space-y-2 text-blue-900 text-sm md:text-base pb-10">
<div>
<a href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/">
🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam
</a> </a>
</div> </div>
<hr className="border-blue-900 mb-4" />
<div className="space-y-2 text-blue-900 text-sm md:text-base pb-10">
<div>
<a href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/">
🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam
</a>
</div>
<div>
<a href='https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/'>
🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật
</a>
</div>
</div>
<div> <div>
<a href='https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/'> <a href="https://hardwaretools.com.vn/">
🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật <img src="/home/20-2048x1365.webp" alt="banner" />
</a> </a>
</div> </div>
</div> </aside>
<div> </section>
<a href="https://hardwaretools.com.vn/">
<img src="/home/20-2048x1365.webp" alt="banner" />
</a>
</div>
</aside>
</section>
{/* Sự kiện */}
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
<div className="flex-1 bg-blue-900 p-5">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Sự kiện sắp diễn ra
</h2>
<a href="#" className="text-[#e8c518] text-sm sm:text-base">
{'>>'}
</a>
</div>
<hr className="border-[#e8c518] mb-4" />
<div className="flex flex-col md:flex-row gap-5">
{eventData?.responseData.rows.slice(0, 1).map((event: EventItem) => (
<a
key={event.id}
href={`${event.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
>
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}} />
</div>
<div className="flex-1"> {/* Sự kiện */}
<p className="text-[#0056b3] font-bold text-xl line-clamp-2"> <section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
{event.name} <div className="flex-1 bg-blue-900 p-5">
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(event.start_time).format('DD/MM/YYYY')}
</p>
<AppEditorContent className="line-clamp-3" value={event.description} />
</div>
</a>
))}
<div className="w-full md:w-1/2">
{eventData?.responseData.rows.slice(0, 4).map((event) => (
<CardEvent key={event.id} event={event} />
))}
</div>
</div>
</div>
<div className='bg-blue-900 w-full lg:w-[30%] p-5'>
<aside>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Lịch sự kiện Sự kiện sắp diễn ra
</h2> </h2>
<a href="#" className="text-[#e8c518] hover:underline text-sm sm:text-base"> <a href="#" className="text-[#e8c518] text-sm sm:text-base">
{'>>'} {'>>'}
</a> </a>
</div> </div>
<hr className="border-[#e8c518] mb-4" /> <hr className="border-[#e8c518] mb-4" />
<EventCalendar />
</aside>
</div>
</section>
{/* Cơ hội kinh doanh + Chính sách */} <div className="flex flex-col md:flex-row gap-5">
<div className='flex flex-col lg:flex-row gap-5 pb-10 mb-0'> {eventData?.responseData.rows.slice(0, 1).map((event: EventItem) => (
<div className='flex flex-col flex-1'> <a
<div> key={event.id}
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2022/11/MEDIA-KIT_VCCI-HCM-2022-Final.pdf"> href={`${event.id}`}
<img src="/home/Standard-Banner-1-2024.png.webp" alt="banner" /> className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
</a> >
<div className="w-full aspect-3/2 overflow-hidden">
<img
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
className="w-full h-full object-cover"
onError={(e) => {
e.currentTarget.onerror = null
e.currentTarget.src = "/fallback.png"
}} />
</div>
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{event.name}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(event.start_time).format('DD/MM/YYYY')}
</p>
<AppEditorContent className="line-clamp-3" value={event.description} />
</div>
</a>
))}
<div className="w-full md:w-1/2">
{eventData?.responseData.rows.slice(0, 4).map((event) => (
<CardEvent key={event.id} event={event} />
))}
</div>
</div>
</div> </div>
<section className="flex flex-col md:flex-row gap-5 pt-8"> <div className='bg-blue-900 w-full lg:w-[30%] p-5'>
<div className="flex-1"> <aside>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900"> <h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Cơ hội kinh doanh Lịch sự kiện
</a> </h2>
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-blue-900 text-sm sm:text-base"> <a href="#" className="text-[#e8c518] hover:underline text-sm sm:text-base">
{'>>'} {'>>'}
</a> </a>
</div> </div>
<hr className="border-blue-900 mb-4" /> <hr className="border-[#e8c518] mb-4" />
<div className="pt-2"> <EventCalendar />
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => ( </aside>
<a </div>
key={news.id} </section>
href={`${news.id}`}
> {/* Cơ hội kinh doanh + Chính sách */}
<div className="w-full aspect-3/2 relative overflow-hidden mb-5"> <div className='flex flex-col lg:flex-row gap-5 pb-10 mb-0'>
<img <div className='flex flex-col flex-1'>
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} <div>
alt={news.title} <a href="https://vcci-hcm.org.vn/wp-content/uploads/2022/11/MEDIA-KIT_VCCI-HCM-2022-Final.pdf">
className="w-full h-full object-cover" <img src="/home/Standard-Banner-1-2024.png.webp" alt="banner" />
/> </a>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5"> </div>
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3"> <section className="flex flex-col md:flex-row gap-5 pt-8">
{news.title} <div className="flex-1">
</p> <div className="flex justify-between items-center">
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Cơ hội kinh doanh
</a>
<a href="/xuc-tien-thuong-mai/co-hoi-kinh-doanh/" className="text-blue-900 text-sm sm:text-base">
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-4" />
<div className="pt-2">
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div> </div>
</div> </a>
))}
{rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
))}
</div>
</div>
<div className="flex-1">
<div className="flex justify-between items-center">
<a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Chính sách & pháp luật
</a> </a>
))} <a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-blue-900 text-sm sm:text-base">
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-4" />
<div className="pt-2">
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => (
<a
key={news.id}
href={`${news.id}`}
>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full h-full object-cover"
/>
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div>
</a>
))}
{rows.slice(0, 3).map((news) => ( {rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} /> <CardNews key={news.id} news={news} />
))} ))}
</div>
</div> </div>
</section>
</div>
<div className='w-full lg:w-[30%] justify-center items-start flex'>
<a href="https://smartgara.ecaraid.com/">
<img src="/home/eCarAid_web_banner_600x400.webp" alt="banner" />
</a>
</div>
</div >
{/* Hội viên tiêu biểu */}
< section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" >
{/* left */}
< aside className="w-full lg:w-1/3 flex-1 bg-[#e8c518] p-5" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Hội viên tiêu biểu</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div> </div>
<div className="flex-1"> <hr className="border-blue-900 mb-5" />
<div className="flex justify-between items-center"> <div>
<a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900"> <Swiper
Chính sách & pháp luật modules={[Autoplay, Grid]}
</a> autoplay={{ delay: 4000, disableOnInteraction: false }}
<a href="/thong-tin-truyen-thong/thong-tin-chinh-sach-va-phap-luat" className="text-blue-900 text-sm sm:text-base"> loop
{'>>'} grid={{ rows: 1, fill: 'row' }}
</a> slidesPerGroup={3}
</div> breakpoints={{
<hr className="border-blue-900 mb-4" /> 0: { slidesPerView: 2, spaceBetween: 10 },
<div className="pt-2"> 640: { slidesPerView: 3, spaceBetween: 16 },
{newsData?.responseData.rows.slice(0, 1).map((news: NewsAdminItem) => ( 1024: { slidesPerView: 3, spaceBetween: 24 },
<a }}
key={news.id} className="partner-swiper"
href={`${news.id}`} >
> {hoivien.map((src, i) => (
<div className="w-full aspect-3/2 relative overflow-hidden mb-5"> <SwiperSlide key={i}>
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow">
<img <img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={src}
alt={news.title} alt={`partner-${i}`}
className="w-full h-full object-cover" className="w-3/4 h-3/4 object-contain"
/> />
<div className="absolute bg-white opacity-80 bottom-5 left-5 right-5 p-5">
<p className="text-blue-900 font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div> </div>
</a> </SwiperSlide>
))} ))}
</Swiper>
</div>
</aside >
{rows.slice(0, 3).map((news) => ( {/* right */}
<CardNews key={news.id} news={news} /> < aside className="w-full lg:w-[30%] py-5" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Kết nối hội viên</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="partner-swiper"
>
{images.map((src, i) => (
<SwiperSlide key={i}>
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow">
<img
src={src}
alt={`partner-${i}`}
className="w-3/4 h-3/4 object-contain"
/>
</div>
</SwiperSlide>
))} ))}
</div> </Swiper>
</div> </div>
</section> </aside >
</div> </section >
<div className='w-full lg:w-[30%] justify-center items-start flex'>
<a href="https://smartgara.ecaraid.com/">
<img src="/home/eCarAid_web_banner_600x400.webp" alt="banner" />
</a>
</div>
</div >
{/* Hội viên tiêu biểu */} {/* Video + đối tác */}
< section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" > < section className="flex flex-col lg:flex-row gap-5 pb-10" >
{/* left */} {/* left */}
< aside className="w-full lg:w-1/3 flex-1 bg-[#e8c518] p-5" > < div className="flex flex-col flex-1" >
<div className="flex justify-between items-center mb-3"> <div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Hội viên tiêu biểu</h2> <h2 className="text-xl font-bold uppercase text-blue-900">Video</h2>
<a <a
href="#" href="#"
className="text-blue-900 hover:underline text-sm font-medium" className="text-blue-900 hover:underline text-sm font-medium"
> >
{'>>'} {'>>'}
</a> </a>
</div> </div>
<hr className="border-blue-900 mb-5" /> <hr className="border-blue-900 mb-5" />
<div> <div className="flex flex-col md:flex-row gap-4 md:gap-6">
<Swiper {[
modules={[Autoplay, Grid]} {
autoplay={{ delay: 4000, disableOnInteraction: false }} src: 'https://www.youtube.com/embed/J0Iz0iGuAXY',
loop title: 'VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)',
grid={{ rows: 1, fill: 'row' }} },
slidesPerGroup={3} {
breakpoints={{ src: 'https://www.youtube.com/embed/_OnnGWv2ehM',
0: { slidesPerView: 2, spaceBetween: 10 }, title: 'Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025',
640: { slidesPerView: 3, spaceBetween: 16 }, },
1024: { slidesPerView: 3, spaceBetween: 24 }, ].map((video, i) => (
}} <div key={i} className="w-full md:w-1/2">
className="partner-swiper" <div className="aspect-video rounded-lg overflow-hidden shadow">
> <iframe
{hoivien.map((src, i) => ( className="w-full h-full font-bold"
<SwiperSlide key={i}> src={video.src}
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow"> title={video.title}
<img frameBorder="0"
src={src} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
alt={`partner-${i}`} referrerPolicy="strict-origin-when-cross-origin"
className="w-3/4 h-3/4 object-contain" allowFullScreen
/>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</aside >
{/* right */}
< aside className="w-full lg:w-[30%] py-5" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Kết nối hội viên</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="partner-swiper"
>
{images.map((src, i) => (
<SwiperSlide key={i}>
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow">
<img
src={src}
alt={`partner-${i}`}
className="w-3/4 h-3/4 object-contain"
/> />
</div> </div>
</SwiperSlide> <p className="mt-2 text-sm text-gray-700 font-medium">{video.title}</p>
))}
</Swiper>
</div>
</aside >
</section >
{/* Video + đối tác */}
< section className="flex flex-col lg:flex-row gap-5 pb-10" >
{/* left */}
< div className="flex flex-col flex-1" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Video</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-5" />
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
{[
{
src: 'https://www.youtube.com/embed/J0Iz0iGuAXY',
title: 'VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)',
},
{
src: 'https://www.youtube.com/embed/_OnnGWv2ehM',
title: 'Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025',
},
].map((video, i) => (
<div key={i} className="w-full md:w-1/2">
<div className="aspect-video rounded-lg overflow-hidden shadow">
<iframe
className="w-full h-full font-bold"
src={video.src}
title={video.title}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>
</div> </div>
<p className="mt-2 text-sm text-gray-700 font-medium">{video.title}</p>
</div>
))}
</div>
</div >
{/* right */}
< aside className="w-full lg:w-[30%]" >
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Đối tác</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="partner-swiper"
>
{images.map((src, i) => (
<SwiperSlide key={i}>
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow">
<img
src={src}
alt={`partner-${i}`}
className="w-3/4 h-3/4 object-contain"
/>
</div>
</SwiperSlide>
))} ))}
</Swiper> </div>
</div> </div >
</aside >
</section > {/* right */}
</div > < aside className="w-full lg:w-[30%]" >
</> <div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-blue-900">Đối tác</h2>
<a
href="#"
className="text-blue-900 hover:underline text-sm font-medium"
>
{'>>'}
</a>
</div>
<hr className="border-blue-900 mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: 'row' }}
slidesPerGroup={3}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="partner-swiper"
>
{images.map((src, i) => (
<SwiperSlide key={i}>
<div className="aspect-square flex justify-center items-center bg-white rounded-lg shadow">
<img
src={src}
alt={`partner-${i}`}
className="w-3/4 h-3/4 object-contain"
/>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</aside >
</section >
</div >
</>
)
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment