Skip to content

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

update loading

parent e83b5a22
Hide whitespace changes
Inline Side-by-side
Showing with 451 additions and 452 deletions
src/app/(main)/(home)/page.tsx
View file @ 33fcbbfb
...@@ -67,518 +67,517 @@ const Page = () => { ...@@ -67,518 +67,517 @@ 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"
/> />
</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"
/>
</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"
/>
</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"
/>
</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