Skip to content

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

update/responsive home page and members page

parent 5dc31199
Show whitespace changes
Inline Side-by-side
Showing with 359 additions and 329 deletions
src/app/(main)/(home)/components/news-content/NewsContent.tsx → src/app/(main)/(home)/components/card-news/index.tsx
View file @ e0c56a2e
......@@ -3,16 +3,16 @@ import BASE_URL from '@/links'
import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content';
function NewsContent({ news }: { news: NewsAdminItem }) {
function CardNews({ news }: { news: NewsAdminItem }) {
return (
<a
href={`${news.id}`}
className='flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
className='flex flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
>
<img
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className='w-full sm:w-[120px] h-20 object-cover rounded-sm'
className='w-[120px] h-20 object-cover rounded-sm'
/>
<div className='flex-1'>
<p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
......@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) {
);
}
export default NewsContent;
\ No newline at end of file
export default CardNews;
\ No newline at end of file
src/app/(main)/(home)/components/news-content/index.tsx deleted 100644 → 0
View file @ 5dc31199
export { default } from './NewsContent';
\ No newline at end of file
src/app/(main)/(home)/page.tsx
View file @ e0c56a2e
......@@ -9,7 +9,7 @@ import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import BASE_URL from '@/links/index'
import NewsContent from './components/news-content/NewsContent'
import NewsContent from './components/card-news'
import { Spinner } from '@/components/ui'
import { useGetCategory } from '@/api/endpoints/category'
import { useGetNews } from '@/api/endpoints/news'
......@@ -18,159 +18,138 @@ import { GetNewsAdminResponseType } from '@/api/types/news'
import EventCalendar from './components/event-calendar'
const Home = () => {
// states
const [tab, setTab] = useState('all')
const [search, setSearch] = useState('')
const [submitSearch, setSubmitSearch] = useState('')
const [currentIndex, setCurrentIndex] = useState(0)
// responsive slidesPerView used to compute pagination pages
const [slidesPerView, setSlidesPerView] = useState<number>(3)
// Refs
const swiperRef = useRef<SwiperType | null>(null)
// server
const { data: categoryData } = useGetCategory<GetCategoryAdminResponseType>();
const { data: categoryData } = useGetCategory<GetCategoryAdminResponseType>()
const { data: allData, isLoading } = useGetNews<GetNewsAdminResponseType>({
pageSize: '999',
filters: submitSearch ? `title @=${submitSearch}` : undefined,
})
//tab filter
const rows = allData?.responseData?.rows ?? [];
const filteredRows = tab === 'all'
? rows
: rows.filter(news => news.category === tab);
const rows = allData?.responseData?.rows ?? []
const filteredRows = tab === 'all' ? rows : rows.filter((n) => n.category === tab)
// update slidesPerView on resize to match the Swiper breakpoints
useEffect(() => {
const getSlides = (w: number) => {
if (w >= 1024) return 3
if (w >= 640) return 2
return 1
}
const update = () => setSlidesPerView(getSlides(window.innerWidth))
// run once on mount
update()
window.addEventListener('resize', update)
return () => window.removeEventListener('resize', update)
}, [])
//template
if (isLoading)
return (
isLoading ? (
<div className='w-full h-[80vh] flex justify-center items-center'>
<div className="w-full h-[80vh] flex justify-center items-center">
<Spinner />
</div>
) : (
)
return (
<>
{/* Banner */}
<Swiper
modules={[Autoplay]}
// navigation
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
slidesPerView={1}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
onSlideChange={(swiper) => {
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
}}
onSwiper={(s) => (swiperRef.current = s)}
onSlideChange={(s) =>
setCurrentIndex(typeof s.realIndex === 'number' ? s.realIndex : s.activeIndex)
}
>
<SwiperSlide>
<img
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"
alt="Banner"
className='w-full'
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/>
</SwiperSlide>
<SwiperSlide>
<img
src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png"
alt="Banner"
className='w-full'
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/>
</SwiperSlide>
</Swiper>
<div className='container'>
{/* slider */}
<div className='pb-10'>
<div className='flex py-10 justify-center items-center w-full text-center'>
<hr className='border-blue-900 w-full' />
<h1 className='text-app-blue text-[28px] leading-normal uppercase font-bold w-full text-blue-900'>
<div className="container mx-auto px-3 sm:px-6 lg:px-10 space-y-12">
{/* Featured News */}
<section>
<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">
Tin Nổi Bật
</h1>
<hr className='border-blue-900 w-full' />
<div className="w-16 h-[3px] bg-blue-900 mt-2 rounded-full"></div>
</div>
<div>
<Swiper
modules={[Autoplay]}
// navigation
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
spaceBetween={30}
breakpoints={{
0: { slidesPerView: 1 },
640: { slidesPerView: 2 },
1024: { slidesPerView: 3 }
}}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
onSlideChange={(swiper) => {
setCurrentIndex(typeof swiper.realIndex === 'number' ? swiper.realIndex : swiper.activeIndex)
0: { slidesPerView: 1.1, spaceBetween: 10 },
640: { slidesPerView: 2, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="pb-5"
>
{allData?.responseData?.rows.map((news) => (
{rows.map((news) => (
<SwiperSlide key={news.id}>
<a href={`/tin-tuc/${news.id}`} className='block bg-white shadow-md overflow-hidden relative'>
<a
href={`/tin-tuc/${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 h-48 sm:h-56 md:h-64 object-cover'
className="w-full h-48 sm:h-56 md:h-64 object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 h-20 bg-linear-to-t from-black/90 to-transparent text-white px-4 font-semibold text-base flex items-center justify-center text-center md:h-24">
<div
className="w-full overflow-hidden"
style={{
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
}}
>
<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}
</div>
</p>
</div>
</a>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</section>
{/* content 1 */}
<div className='flex flex-row gap-[30px] pb-10'>
<div className='w-[68.5%]'>
<div className='pb-5'>
<div className="flex flex-row justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
{/* Tin tức + Liên kết nhanh */}
<section className="flex flex-col lg:flex-row gap-8">
{/* Left */}
<div className="flex-1">
<div className="pb-4 flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Tin tức
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div>
<div className='flex flex-row gap-[30px]'>
<div className="w-full bg-gray-500 flex items-center justify-center rounded-md">
<p className="text-white">khung tin tức vip</p>
<hr className="border-blue-900 mb-4" />
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
<div className="w-full md:w-1/2 bg-gray-500 flex items-center justify-center rounded-lg p-4 min-h-[180px] sm:min-h-[220px]">
<p className="text-white text-center">Khung tin tức VIP</p>
</div>
<div className="w-full overflow-hidden">
<div className="flex mb-3 flex-wrap justify-between">
<div className="w-full md:w-1/2">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-3">
<button
className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${'all' === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'
className={`flex-1 px-3 sm:px-4 py-2 rounded-md border text-sm transition-colors ${tab === 'all'
? 'border-blue-700 bg-blue-50 text-blue-800 font-semibold'
: 'border-gray-300 bg-white hover:bg-gray-50'
}`}
onClick={() => setTab('all')}
>
......@@ -179,7 +158,9 @@ const Home = () => {
{categoryData?.responseData.rows.slice(0, 3).map((category) => (
<button
key={category.id}
className={`w-22 cursor-pointer hover:bg-border-blue-700 hover:bg-blue-50 px-4 py-1 rounded-md border ${category.name === tab ? 'border-blue-700 bg-blue-50' : 'border-gray-300 bg-white'
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)}
>
......@@ -187,112 +168,110 @@ const Home = () => {
</button>
))}
</div>
{allData?.responseData.rows.slice(0, 5).map((news) => (
{filteredRows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} />
))}
</div>
</div>
</div>
<div className='w-[33%]'>
<div className='pb-5'>
<div className="flex flex-row justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
{/* Right */}
<aside className="w-full lg:w-1/3">
<div className="pb-4 flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Liên kết nhanh
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div>
<div>
<p>🔗 Cẩm nang Hướng dẫn đầu tư kinh doanh tại Việt Nam</p>
<hr className="border-blue-900 mb-4" />
<div className="space-y-2 text-blue-900 text-sm md:text-base">
<p>🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam</p>
<p>🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật</p>
</div>
</div>
</div>
</aside>
</section>
{/* content 2 */}
<div className='flex flex-row gap-[30px] pb-10'>
<div className='w-[68.5%]'>
<div className='pb-5'>
<div className="flex flex-row justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
{/* Sự kiện */}
<section className="flex flex-col lg:flex-row gap-8">
<div className="flex-1">
<div className="pb-4 flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Sự kiện sắp diễn ra
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div>
<div className='flex flex-row gap-[30px]'>
<div className="w-full bg-gray-500 flex items-center justify-center rounded-md">
<p className="text-white">khung tin tức vip</p>
<hr className="border-blue-900 mb-4" />
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
<div className="w-full md:w-1/2 bg-gray-500 flex items-center justify-center rounded-lg p-4 min-h-[180px] sm:min-h-[220px]">
<p className="text-white">Khung tin tức VIP</p>
</div>
<div className="w-full overflow-hidden">
{allData?.responseData.rows.slice(0, 5).map((news) => (
<div className="w-full md:w-1/2">
{rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} />
))}
</div>
</div>
</div>
<div className='w-[33%]'>
<div className='pb-5'>
<div className="flex flex-row justify-between items-center">
<a href="#" className="text-[20px] font-bold uppercase text-blue-900">
<aside className="w-full lg:w-1/3">
<div className="pb-4 flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Lịch sự kiện
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href="#" className="text-blue-900">{'>>'}</a>
</div>
<hr className="border-blue-900" />
</div>
<hr className="border-blue-900 mb-4" />
<EventCalendar />
</div>
</div>
</aside>
</section>
{/* content 3 */}
< div className='flex flex-row gap-[30px] pb-10' >
{/* Cơ hội kinh doanh */}
< div className='flex flex-col' >
<div>
<div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
{/* Cơ hội kinh doanh + Chính sách */}
<section className="flex flex-col md:flex-row gap-6 lg:gap-10 border-t border-gray-200 pt-8 pb-16">
<div className="flex-1">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Cơ hội kinh doanh
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href='#' className='text-blue-900'>{'>>'}</a>
</div>
<hr className=' border-blue-900' />
</div>
<div className='pt-5'>
{allData?.responseData.rows.slice(0, 5).map((news) => (
<hr className="border-blue-900 mb-4" />
<div className="pt-2 space-y-3">
{rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} />
))}
</div>
</div >
</div>
{/* Chính sách & pháp luật */}
< div className='flex flex-col' >
<div>
<div className='flex justify-between items-center w-full'>
<a href='#' className='text-[20px] font-bold uppercase text-blue-900'>
<div className="flex-1">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-blue-900">
Chính sách & pháp luật
</h2>
<a href="#" className="text-blue-900 hover:underline text-sm sm:text-base">
{'>>'}
</a>
<a href='#' className='text-blue-900'>{'>>'}</a>
</div>
<hr className=' border-blue-900' />
</div>
<div className='pt-5'>
{allData?.responseData.rows.slice(0, 5).map((news) => (
<hr className="border-blue-900 mb-4" />
<div className="pt-2 space-y-3">
{rows.slice(0, 5).map((news) => (
<NewsContent key={news.id} news={news} />
))}
</div>
</div >
</div >
</div >
</div>
</section>
</div>
</>
)
)
}
export default Home
src/app/(main)/hoi-vien/components/card-news/index.tsx
View file @ e0c56a2e
import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type';
import Links from '@links/index'
import { NewsAdminItem } from '@/api/types/news'
import BASE_URL from '@/links'
import dayjs from 'dayjs';
import AppEditorContent from '@/components/shared/editor-content';
import parse from 'html-react-parser'
function NewsContent({ news }: { news: NewsItem }) {
function CardNews({ news }: { news: NewsAdminItem }) {
return (
<a
href={`/tin-tuc/${news.id}`}
className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0"
href={`${news.id}`}
className="flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3 hover:shadow-md transition"
>
<img
src={`${Links.imageEndpoint}${news.thumbnail}`}
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0"
className="w-full sm:w-40 h-40 sm:h-28 object-cover rounded-md"
/>
<div className="flex-1 min-w-0 pl-0 sm:pl-4">
<p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word hover:no-underline">
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-sm sm:text-base line-clamp-2">
{news.title}
</p>
<div className="text-sm my-2 text-[#00AED5]">{dayjs(news.release_at).format('DD/MM/YYYY')}</div>
<div className="text-sm text-[#777] line-clamp-3">
<div className="text-sm prose tiptap">{parse(news.description)}</div>
<p className="text-gray-500 text-xs sm:text-sm my-1">
{dayjs(news.release_at).format('DD/MM/YYYY')}
</p>
<div className="text-xs sm:text-sm text-[#777] line-clamp-3 prose tiptap">
{parse(news.description)}
</div>
</div>
</a>
)
);
}
export default NewsContent;
\ No newline at end of file
export default CardNews;
\ No newline at end of file
src/app/(main)/hoi-vien/components/list-category/index.tsx
View file @ e0c56a2e
"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { usePathname, useRouter } from "next/navigation"
import React from "react"
type Category = {
......@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [
const ListCategory: React.FC = () => {
const pathname = usePathname() || ""
const router = useRouter()
const isActive = (href: string) => {
if (href === "/hoi-vien") return pathname === "/hoi-vien"
return pathname === href
}
const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
router.push(e.target.value)
}
return (
<div className="border-t border-gray-200 bg-white p-2.5">
<div className="max-w-7xl mx-auto">
<nav aria-label="Danh mục" className="py-3">
<ul className="flex items-center">
{/* --- Desktop view --- */}
<ul className="hidden sm:flex items-center">
{CATEGORIES.map((c) => {
const active = isActive(c.href)
return (
......@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => {
className={
"text-sm font-bold py-3.5 px-5 transition-colors duration-150 " +
(active
? "text-yellow-500 font-semibold decoration-yellow-300 "
: "text-gray-600 hover:text-yellow-500 ")
? "text-yellow-500 font-semibold decoration-yellow-300"
: "text-gray-600 hover:text-yellow-500")
}
>
{c.title}
......@@ -48,6 +54,21 @@ const ListCategory: React.FC = () => {
)
})}
</ul>
{/* --- Mobile view (Dropdown) --- */}
<div className="sm:hidden">
<select
value={pathname}
onChange={handleChange}
className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400"
>
{CATEGORIES.map((c) => (
<option key={c.href} value={c.href}>
{c.title}
</option>
))}
</select>
</div>
</nav>
</div>
</div>
......
src/app/(main)/hoi-vien/dang-ky-hoi-vien/page.tsx
View file @ e0c56a2e
'use client'
import React from "react";
import ListCategory from "./../components/list-category";
const Page = () => {
return (
<div className="min-h-screen container mx-auto pb-4">
<div className="w-full flex flex-col gap-5">
<div className="min-h-screen container mx-auto px-4 sm:px-6 lg:px-8 pb-6">
<div className="flex flex-col gap-5">
<ListCategory />
<div className="gap-6">
{/* Main content */}
<main className="lg:col-span-2 bg-white border rounded-md p-7 px-40">
<div>
<h1 className="text-center mb-4 text-2xl font-bold text-[#153e8e]">THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC</h1>
<p className="text-justify leading-7 mb3">
<main className="bg-white border rounded-md p-5 sm:p-7 lg:py-10 lg:px-40">
<h1 className="text-center mb-4 text-xl sm:text-2xl font-bold text-[#153e8e]">
THỦ TỤC GIA NHẬP HỘI VIÊN CHÍNH THỨC
</h1>
<p className="text-justify leading-7 mb-3">
Điều lệ sửa đổi của Liên đoàn Thương mại và Công nghiệp Việt Nam (VCCI) được Đại hội đại biểu toàn quốc VCCI lần thứ VII thông qua và được Thủ tướng Chính phủ Phê duyệt tại Quyết định số 1496/QĐ-TTg ngày 30/11/2022 đã quy định tất cả các doanh nghiệp, các tổ chức sản xuất, kinh doanh, người sử dụng lao động, các hiệp hội doanh nghiệp có đăng ký và hoạt động hợp pháp ở Việt Nam đều có thể trở thành hội viên của VCCI.
</p>
<p className="text-justify leading-7 mb-3">
Để trở thành hội viên chính thức, tổ chức quan tâm cần gởi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm:
Để trở thành hội viên chính thức, tổ chức quan tâm cần gửi VCCI tại Hà Nội hoặc các Chi nhánh, Văn phòng đại diện của VCCI hồ sơ gia nhập gồm:
</p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)</li>
<li className="text-justify leading-7">Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao).</li>
<ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">
Đơn xin gia nhập làm hội viên chính thức VCCI (2 bản theo mẫu của VCCI)
</li>
<li className="text-justify leading-7">
Giấy phép đăng ký kinh doanh, hoặc giấy phép thành lập hoặc quyết định thành lập (2 bản sao).
</li>
</ul>
<p className="text-justify leading-7 my-3">
Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức. Theo quyết định của Ban chấp hành VCCI, lệ phí hiện hành được tính như sau:
Khi nhận được đơn, Ban Thường trực sẽ xét và thông báo cho tổ chức liên quan về quyết định kết nạp. Trong vòng 1 tháng kể từ ngày nhận thông báo, tổ chức phải thực hiện đóng lệ phí gia nhập. Chỉ khi nào tổ chức đóng lệ phí gia nhập mới được coi là hội viên chính thức.
</p>
<p className="text-justify leading-7 my-3">
Mức lệ phí gia nhập bằng mức hội phí hàng năm, được tính căn cứ vào doanh số của tổ chức trong năm trước theo các mức:
</p>
<ul className="list-disc pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm</li>
<li className="text-justify leading-7">Doanh số từ 10 {`-`} 50 tỉ đồng đóng 7 triệu đồng/năm</li>
<li className="text-justify leading-7">Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm</li>
<ul className="list-disc pl-6 sm:pl-10 space-y-1 font-bold">
<li className="text-justify leading-7">
Doanh số dưới 10 tỉ đồng đóng 3 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số từ 10 - 50 tỉ đồng đóng 7 triệu đồng/năm
</li>
<li className="text-justify leading-7">
Doanh số trên 50 tỉ đồng đóng 15 triệu đồng/năm
</li>
</ul>
<p className="text-justify leading-7 my-3">
Mức lệ phí gia nhập và hội phí trên có thể được điều chỉnh bởi quyết định của Ban chấp hành VCCI trong từng thời gian cụ thể.
</p>
<div>
<div className="my-4">
<p className="text-[#063e8e] mb-3">
Để biết thêm thông tin chi tiết, vui lòng liên hệ:
</p>
<p className="text-[#063e8e]">
<b>Phòng Hội viên Đào tạo và Truyền thông</b>
<br />
<b>C. Thúy {`-`} DĐ: 0903 909 756</b>
<b>C. Thúy - ĐĐ: 0903 909 756</b>
<span className="block">
Email: luuthanhthuy72@yahoo.com; hoivien@vcci-hcm.org.vn;
</span>
<span className="block">
Điện thoại: 028.3932.0611 {`-`} Fax: 028.3932.5472
Điện thoại: 028.3932.0611 - Fax: 028.3932.5472
</span>
<span className="block">
Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh </span>
Địa chỉ: P. 306, Lầu 3, Tòa nhà VCCI, 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh
</span>
</p>
</div>
<p className="text-justify leading-7 my-3">
Biểu mẫu đính kèm
<p className="text-justify leading-7 my-3 font-semibold">
Biểu mẫu đính kèm:
</p>
<ul className="list-disc pl-10 space-y-1">
<li className="text-justify leading-7 ">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)
<ul className="list-disc pl-6 sm:pl-10 space-y-1">
<li className="text-justify leading-7">
<a
href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Doanh-nghiep-1.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Doanh nghiệp)
</a>
</li>
<li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)
<a
href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Don-dang-ky-tham-gia-nhap-hoi-vien-VCCI_Mau-Hiep-hoi.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Đơn đăng ký tham gia nhập hội viên VCCI (Mẫu Hiệp hội)
</a>
</li>
<li className="text-justify leading-7">
<a href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx" className="text-[#063e8e] hover:text-yellow-500 italic" download>
Hướng dẫn hồ sơ đăng ký Hội viên VCCI
<a
href="https://vcci-hcm.org.vn/wp-content/uploads/2025/08/Huong-dan-ho-so-dang-ky-Hoi-vien-VCCI.docx"
className="text-[#063e8e] hover:text-yellow-500 italic"
download
>
Hướng dẫn hồ sơ đăng ký Hội viên VCCI
</a>
</li>
</ul>
</div >
</main>
</div >
</div >
</div >
</div>
</div>
);
};
......
src/app/(main)/hoi-vien/ket-noi-hoi-vien/page.tsx
View file @ e0c56a2e
......@@ -2,7 +2,7 @@
import React, { useState } from "react";
import ListCategory from "./../components/list-category";
import ListFilter from "./../components/list-filter";
import NewsContent from "./../components/card-news";
import CardNews from "./../components/card-news";
import { Pagination } from '@components/base/pagination'
import Image from "next/image";
import { useGetNews } from '@api/endpoints/news'
......@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
<CardNews key={news.id} news={news} />
))}
<div className='w-full flex justify-center mt-4'>
......
src/app/(main)/hoi-vien/tin-hoi-vien/page.tsx
View file @ e0c56a2e
......@@ -2,7 +2,7 @@
import React, { useState } from "react";
import ListCategory from "./../components/list-category";
import ListFilter from "./../components/list-filter";
import NewsContent from "./../components/card-news";
import CardNews from "./../components/card-news";
import { Pagination } from '@components/base/pagination'
import Image from "next/image";
import { useGetNews } from '@api/endpoints/news'
......@@ -27,7 +27,7 @@ export default function Page() {
<main className="lg:col-span-2 bg-background">
<div className='pb-5 overflow-hidden'>
{allData?.responseData.rows.map((news) => (
<NewsContent key={news.id} news={news} />
<CardNews key={news.id} news={news} />
))}
<div className='w-full flex justify-center mt-4'>
......
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