Skip to content

V
VCCI-News
Commit c03ea16b authored by Lê Bảo Hồng Đức's avatar Lê Bảo Hồng Đức ☄
Browse files
Options

re-design ui home client

parent 051d8a8b
Show whitespace changes
Inline Side-by-side
Showing with 1912 additions and 691 deletions
src/app/(main)/(home)/components/banner/index.tsx
View file @ c03ea16b
...@@ -5,6 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react"; ...@@ -5,6 +5,7 @@ import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules"; import { Autoplay } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types"; import { Swiper as SwiperType } from "swiper/types";
import { useRef } from "react"; import { useRef } from "react";
import "swiper/css";
const Banner = () => { const Banner = () => {
const swiperRef = useRef<SwiperType | null>(null); const swiperRef = useRef<SwiperType | null>(null);
...@@ -16,6 +17,7 @@ const Banner = () => { ...@@ -16,6 +17,7 @@ const Banner = () => {
loop loop
slidesPerView={1} slidesPerView={1}
onSwiper={(s) => (swiperRef.current = s)} onSwiper={(s) => (swiperRef.current = s)}
className="w-full overflow-hidden"
> >
<SwiperSlide> <SwiperSlide>
<ImageNext <ImageNext
......
src/app/(main)/(home)/components/business-opportunities/index.tsx
View file @ c03ea16b
import { useGetNews } from "@/api/endpoints/news"; 'use client';
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next"; import {
import { Spinner } from "@/components/ui/spinner"; type AdminNewsItem,
import { ChevronsRight } from "lucide-react"; getAdminNewsSeed,
} from "@/mockdata/admin-news";
import dayjs from "dayjs";
import { ChevronRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import BASE_URL from "@/links/index";
import CardNews from "./components/card-news";
const businessOpportunities = () => { const businessItems = getAdminNewsSeed()
const { data, isLoading } = useGetNews<GetNewsResponseType>( .filter(
{ (item) =>
pageSize: '5', item.type === "tintuc" &&
filters: `page_config.code @=co-hoi-kinh-doanh`, !item.is_hidden &&
} (item.category_ids.includes("cat-business-opportunity") ||
item.tagsearch_values.some((tag) => tag.toLowerCase().includes("cơ hội kinh doanh"))),
)
.sort(
(left, right) =>
new Date(right.published_at || right.created_at).getTime() -
new Date(left.published_at || left.created_at).getTime(),
); );
function formatPublishDate(item: AdminNewsItem) {
return dayjs(item.published_at || item.created_at).format("DD/MM/YYYY");
}
function BusinessOpportunities() {
const [featuredItem, ...listItems] = businessItems;
if (!featuredItem) return null;
return ( return (
<div className="flex-1"> <section className="flex-1">
<div className="flex justify-between items-center"> <div className="mb-4 flex items-center justify-between gap-3">
<div>
<h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
Cơ hội kinh doanh
</h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-[#f7b500]" />
</div>
<Link <Link
href="/xuc-tien-thuong-mai/co-hoi/" href="/xuc-tien-thuong-mai/co-hoi/"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]" className="text-[#24469c] transition-colors hover:text-[#1b55a1]"
> >
Cơ hội kinh doanh <ChevronRight className="h-5 w-5" />
</Link> </Link>
</div>
<div className="space-y-3">
<Link <Link
href="/xuc-tien-thuong-mai/co-hoi/" href="/xuc-tien-thuong-mai/co-hoi/"
className="text-[#063e8e] text-sm sm:text-base" className="block rounded-[18px] bg-[#f5f7fb] px-4 py-3.5 transition-colors hover:bg-[#eef3fb]"
> >
<ChevronsRight /> <h3 className="line-clamp-2 text-[16px] font-bold leading-[1.45] text-[#264798] md:text-[17px]">
{featuredItem.title}
</h3>
<p className="mt-2 text-[13px] text-[#9aa8c1]">{formatPublishDate(featuredItem)}</p>
</Link> </Link>
</div>
<hr className="border-[#063e8e] mb-4" /> <div className="space-y-2.5">
<div className="pt-2"> {listItems.slice(0, 3).map((item) => (
{isLoading ? ( <Link
<div className="container w-full h-[80vh] flex justify-center items-center"> key={item.id}
<Spinner /> href="/xuc-tien-thuong-mai/co-hoi/"
</div> className="flex gap-3 rounded-[14px] px-0.5 py-1 transition-colors hover:bg-[#f8fafe]"
) : ( >
<> <span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]" />
{data?.responseData.rows <div className="min-w-0">
.slice(0, 1) <h4 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798]">
.map((news: NewsItem) => ( {item.title}
<Link key={news.id} href={`${news.external_link}`}> </h4>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5"> <p className="mt-1.5 text-[13px] text-[#9aa8c1]">{formatPublishDate(item)}</p>
<ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
width={600}
height={400}
sizes="(max-width:768px) 100vw,50vw"
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-[#063e8e] font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div> </div>
</Link> </Link>
))} ))}
{data?.responseData.rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
))}
</>
)}
</div> </div>
</div> </div>
</section>
); );
}; }
export default businessOpportunities; export default BusinessOpportunities;
src/app/(main)/(home)/components/events-calendar/index.tsx
View file @ c03ea16b
import EventCalendar from "@/components/base/event-calendar" 'use client';
import { ChevronsRight } from "lucide-react"
import Link from "next/link" import {
type AdminNewsItem,
getAdminNewsSeed,
} from "@/mockdata/admin-news";
import { addMonths, format, getDay, startOfMonth, subMonths } from "date-fns";
import dayjs from "dayjs";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useMemo, useState } from "react";
const weekDays = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"];
const eventItems = getAdminNewsSeed()
.filter(
(item) =>
item.type === "tintuc" &&
!item.is_hidden &&
item.started_at,
)
.sort(
(left, right) =>
new Date(left.started_at).getTime() - new Date(right.started_at).getTime(),
);
function isTrainingEvent(item: AdminNewsItem) {
return item.tagsearch_values.some((tag) => tag.toLowerCase().includes("đào tạo"));
}
function EventsCalendar() {
const firstEventDate = eventItems[0]?.started_at
? new Date(eventItems[0].started_at)
: new Date("2026-11-01T00:00:00");
const [currentMonth, setCurrentMonth] = useState(
new Date(firstEventDate.getFullYear(), firstEventDate.getMonth(), 1),
);
const monthEvents = useMemo(
() =>
eventItems.filter((item) => {
const date = new Date(item.started_at);
return (
date.getMonth() === currentMonth.getMonth() &&
date.getFullYear() === currentMonth.getFullYear()
);
}),
[currentMonth],
);
const days = useMemo(() => {
const monthStart = startOfMonth(currentMonth);
const startWeekDay = getDay(monthStart);
const start = new Date(monthStart);
start.setDate(monthStart.getDate() - startWeekDay);
return Array.from({ length: 35 }, (_, index) => {
const day = new Date(start);
day.setDate(start.getDate() + index);
return day;
});
}, [currentMonth]);
const eventMap = useMemo(() => {
const map = new Map<string, AdminNewsItem[]>();
monthEvents.forEach((item) => {
const key = dayjs(item.started_at).format("YYYY-MM-DD");
const existing = map.get(key) ?? [];
existing.push(item);
map.set(key, existing);
});
return map;
}, [monthEvents]);
const highlightedEvent = monthEvents[0];
const EventsCalendar = () => {
return ( return (
<div className="bg-[#063e8e] w-full lg:w-[30%] p-5"> <aside className="w-full rounded-[28px] bg-white p-4 text-[#24469c] shadow-[0_18px_38px_rgba(16,61,130,0.16)] md:p-5 xl:w-[28%] xl:min-w-[320px]">
<aside> <div className="flex items-start justify-between gap-3">
<div className="flex justify-between items-center"> <div>
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]"> <h2 className="text-[28px] font-extrabold uppercase tracking-tight md:text-[34px]">
Lịch sự kiện Lịch sự kiện
</h2> </h2>
<Link <p className="mt-1.5 text-[12px] uppercase tracking-[0.28em] text-[#7f8eab]">
href="/hoat-dong/su-kien" {`THÁNG ${format(currentMonth, "MM/yyyy")}`}
className="text-[#e8c518] hover:underline text-sm sm:text-base" </p>
</div>
<div className="flex gap-2">
<button
type="button"
onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
className="flex h-8 w-8 items-center justify-center rounded-full border border-[#dbe4f2] text-[#7f8eab] transition-colors hover:border-[#24469c] hover:text-[#24469c]"
> >
<ChevronsRight /> <ChevronLeft className="h-4 w-4" />
</Link> </button>
<button
type="button"
onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
className="flex h-8 w-8 items-center justify-center rounded-full border border-[#dbe4f2] text-[#7f8eab] transition-colors hover:border-[#24469c] hover:text-[#24469c]"
>
<ChevronRight className="h-4 w-4" />
</button>
</div> </div>
<hr className="border-[#e8c518] mb-4" />
<EventCalendar />
</aside>
</div> </div>
)
<div className="mt-3 h-[4px] w-[60px] rounded-full bg-[#f7b500]" />
<div className="mt-4 border-t border-[#ebf0f8] pt-3.5">
<div className="grid grid-cols-7 gap-y-2.5 text-center text-[11px] font-semibold uppercase text-[#9aabc6]">
{weekDays.map((day) => (
<div key={day}>{day}</div>
))}
</div>
<div className="mt-2.5 grid grid-cols-7 gap-y-2.5 text-center text-[13px] text-[#5e7090]">
{days.map((day) => {
const key = dayjs(day).format("YYYY-MM-DD");
const items = eventMap.get(key) ?? [];
const inMonth = day.getMonth() === currentMonth.getMonth();
const hasTraining = items.some((item) => isTrainingEvent(item));
const hasEvent = items.length > 0 && !hasTraining;
return (
<div key={key} className="relative flex items-center justify-center">
<span
className={`relative flex h-7 w-7 items-center justify-center rounded-full ${
!inMonth
? "text-[#c9d2e2]"
: hasTraining
? "bg-[#ffbc11] font-semibold text-[#163b73]"
: hasEvent
? "bg-[#1e3f9a] font-semibold text-white"
: ""
}`}
>
{format(day, "d")}
</span>
{items.length > 0 && !hasTraining && inMonth ? (
<span className="absolute bottom-[-5px] h-1.5 w-1.5 rounded-full bg-[#1e3f9a]" />
) : null}
{items.length > 0 && hasTraining && inMonth ? (
<span className="absolute bottom-[-5px] h-1.5 w-1.5 rounded-full bg-[#ffbc11]" />
) : null}
</div>
);
})}
</div>
</div>
<div className="mt-4 flex items-center gap-5 text-[12px] font-medium text-[#45608f]">
<div className="flex items-center gap-2">
<span className="h-2.5 w-2.5 rounded-full bg-[#1e3f9a]" />
<span>Sự kiện</span>
</div>
<div className="flex items-center gap-2">
<span className="h-2.5 w-2.5 rounded-full bg-[#ffbc11]" />
<span>Đào tạo</span>
</div>
</div>
{highlightedEvent ? (
<div className="mt-4 rounded-[16px] bg-[#f7f9fd] p-3.5 text-[12px] leading-5 text-[#3d547f]">
<div className="flex items-start gap-3">
<span
className={`mt-1 h-2.5 w-2.5 rounded-full ${
isTrainingEvent(highlightedEvent) ? "bg-[#ffbc11]" : "bg-[#1e3f9a]"
}`}
/>
<p className="line-clamp-3">{highlightedEvent.title}</p>
</div>
</div>
) : null}
</aside>
);
} }
export default EventsCalendar export default EventsCalendar;
\ No newline at end of file
src/app/(main)/(home)/components/events/index.tsx
View file @ c03ea16b
import { useGetEvents } from "@/api/endpoints/event"; 'use client';
import { EventApiResponse, EventItem } from "@/api/types/event";
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import { Spinner } from "@/components/ui/spinner"; import {
import { ChevronsRight } from "lucide-react" type AdminNewsItem,
import Link from "next/link" getAdminNewsSeed,
import BASE_URL from "@/links/index"; } from "@/mockdata/admin-news";
import CardEvent from "./components/card-event";
import stripImagesAndHtml from "@/helpers/stripImageAndHtml";
import dayjs from "dayjs"; import dayjs from "dayjs";
import Link from "next/link";
const eventItems = getAdminNewsSeed()
.filter(
(item) =>
item.type === "tintuc" &&
item.header_category_id === "activity-events" &&
!item.is_hidden &&
item.started_at,
)
.sort(
(left, right) =>
new Date(left.started_at).getTime() - new Date(right.started_at).getTime(),
);
function formatEventDate(item: AdminNewsItem) {
return dayjs(item.started_at || item.published_at || item.created_at).format("DD/MM/YYYY");
}
function Events() { function Events() {
const { data, isLoading } = useGetEvents<EventApiResponse>(); const [featuredEvent, ...sideEvents] = eventItems;
if (!featuredEvent) return null;
return ( return (
<div className="flex-1 bg-[#063e8e] p-5"> <div className="flex-1 rounded-[28px] bg-linear-to-br from-[#14488f] to-[#2d67bf] p-4 text-white shadow-[0_18px_38px_rgba(16,61,130,0.24)] md:p-5">
<div className="flex justify-between items-center"> <div className="mb-4 flex items-start justify-between gap-4">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]"> <div>
<h2 className="text-[28px] font-extrabold uppercase tracking-tight text-white md:text-[34px]">
Sự kiện sắp diễn ra Sự kiện sắp diễn ra
</h2> </h2>
<Link href="/hoat-dong/su-kien" className="text-[#e8c518] text-sm sm:text-base"> <div className="mt-2.5 h-[4px] w-[60px] rounded-full bg-[#f7b500]" />
<ChevronsRight /> </div>
<Link
href="/hoat-dong/su-kien"
className="pt-1.5 text-sm font-semibold text-[#ffd34f] transition-colors hover:text-white"
>
Xem sự kiện
</Link> </Link>
</div> </div>
<hr className="border-[#e8c518] mb-4" />
<div className="flex flex-col md:flex-row gap-5"> <div className="grid items-stretch gap-3 xl:grid-cols-[minmax(0,1.02fr)_minmax(270px,0.98fr)]">
{isLoading ? ( <Link
<div className="flex flex-col justify-center items-center w-full min-h-[180px] sm:min-h-[220px] p-3"> href="/hoat-dong/su-kien"
<Spinner /> className="flex h-full flex-col overflow-hidden rounded-[22px] bg-white text-[#20408f] shadow-[0_14px_28px_rgba(10,39,95,0.18)]"
>
<div className="h-[220px] overflow-hidden md:h-[235px] xl:h-[248px]">
<ImageNext
src={featuredEvent.thumbnail?.url ?? "/thumbnail.png"}
alt={featuredEvent.thumbnail?.alt || featuredEvent.title}
width={720}
height={520}
className="h-full w-full object-cover"
/>
</div>
<div className="p-3 pt-2.5">
<h3 className="line-clamp-2 text-[16px] font-extrabold uppercase leading-[1.28] text-[#22459b] md:text-[18px]">
{featuredEvent.title}
</h3>
<p className="mt-1.5 text-[13px] text-[#90a0bd]">{formatEventDate(featuredEvent)}</p>
</div> </div>
) : ( </Link>
<>
{data?.responseData.rows.slice(0, 1).map((event: EventItem) => ( <div className="flex h-full flex-col gap-3">
{sideEvents.slice(0, 4).map((item) => (
<Link <Link
key={event.id} key={item.id}
href={`hoat-dong/su-kien/${event.id}`} href="/hoat-dong/su-kien"
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" className="flex flex-1 items-center gap-3 rounded-[18px] bg-white/10 p-2.5 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.08)] backdrop-blur-sm transition-colors hover:bg-white/14"
> >
<div className="w-full aspect-3/2 overflow-hidden"> <div className="h-[64px] w-[64px] shrink-0 overflow-hidden rounded-[12px]">
<ImageNext <ImageNext
src={`${BASE_URL.imageEndpoint}${event.image}`} src={item.thumbnail?.url ?? "/thumbnail.png"}
alt={event.name} alt={item.thumbnail?.alt || item.title}
width={600} width={160}
height={400} height={160}
sizes="(max-width:768px) 100vw,50vw" className="h-full w-full object-cover"
className="w-full h-full object-cover"
/> />
</div> </div>
<div className="flex-1"> <div className="min-w-0">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2"> <h4 className="line-clamp-2 text-[15px] font-semibold leading-[1.35] text-white">
{event.name} {item.title}
</p> </h4>
<p className="text-gray-500 text-sm my-1"> <p className="mt-1 text-[12px] text-white/78">{formatEventDate(item)}</p>
{dayjs(event.start_time).format("DD/MM/YYYY")}
</p>
<p className="line-clamp-3 text-justify">{stripImagesAndHtml(event.description)}</p>
</div> </div>
</Link> </Link>
))} ))}
<div className="w-full md:w-1/2">
{data?.responseData.rows.slice(0, 4).map((event) => (
<CardEvent key={event.id} event={event} />
))}
</div> </div>
</>
)}
</div> </div>
</div> </div>
) );
} }
export default Events export default Events;
\ No newline at end of file
src/app/(main)/(home)/components/featured-news/index.tsx
View file @ c03ea16b
'use client'; 'use client';
import { useGetNews } from "@/api/endpoints/news";
import { GetNewsResponseType } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import {
type AdminNewsItem,
getAdminNewsSeed,
} from "@/mockdata/admin-news";
import { getHeaderCategorySeed } from "@/mockdata/header-config";
import dayjs from "dayjs";
import { ChevronRight, Mail, Phone } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Grid } from "swiper/modules"; const FALLBACK_CATEGORY_LINK = "/hoat-dong/tin-tuc";
import BASE_URL from "@/links/index"; const headerCategoryMap = new Map(
import { Spinner } from "@/components/ui/spinner"; getHeaderCategorySeed().map((item) => [item.id, item.static_link]),
);
const FEATURED_OVERVIEW_LINK =
headerCategoryMap.get("activity-news") ?? FALLBACK_CATEGORY_LINK;
function getFeaturedNewsItems(items: AdminNewsItem[]) {
return items
.filter(
(item) =>
item.type === "tintuc" &&
item.is_featured &&
!item.is_hidden &&
Boolean(item.thumbnail?.url),
)
.slice(0, 3);
}
function getNewsLink(item: AdminNewsItem) {
return headerCategoryMap.get(item.header_category_id) ?? FALLBACK_CATEGORY_LINK;
}
function getBadgeLabel(item: AdminNewsItem) {
if (item.header_category_id === "activity-events") return "Sự kiện";
const firstTag = item.tagsearch_values.find(Boolean);
if (firstTag) return firstTag;
return "Tin VCCI";
}
const featuredNewsItems = getFeaturedNewsItems(getAdminNewsSeed());
function FeaturedNews() { function FeaturedNews() {
const { data, isLoading } = useGetNews<GetNewsResponseType>( const [primaryItem, ...secondaryItems] = featuredNewsItems;
{
pageSize: '10', if (!primaryItem) return null;
}
);
return ( return (
<section> <section className="py-8 md:py-10">
<div className="flex items-center justify-center py-8 px-4"> <div className="w-full">
<div className="flex items-center w-full max-w-4xl"> <div className="mb-8 flex items-start justify-between gap-4">
<div className="flex-1 h-px bg-linear-to-r from-transparent via-gray-300 to-gray-400"></div> <div>
<h1 className="px-6 text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-[#063e8e] whitespace-nowrap"> <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
Tin Nổi Bật Tin nổi bật
</h1> </h2>
<div className="flex-1 h-px bg-linear-to-l from-transparent via-gray-300 to-gray-400"></div> <div className="mt-3 h-[5px] w-[68px] rounded-full bg-[#f7b500]" />
</div> </div>
</div>
{isLoading ? ( <Link
<div className="flex justify-center items-center w-full h-64"> href={FEATURED_OVERVIEW_LINK}
<Spinner /> className="inline-flex items-center gap-2 pt-2 text-base font-semibold text-[#2b56c0] transition-colors hover:text-[#173f9f]"
</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"
> >
{data?.responseData?.rows.map((news) => ( <span>Xem tất cả</span>
<SwiperSlide key={news.id}> <ChevronRight className="h-4 w-4" />
</Link>
</div>
<div className="grid gap-5 xl:grid-cols-[minmax(0,1.14fr)_minmax(0,0.96fr)]">
<Link <Link
href={`${news.external_link}`} href={getNewsLink(primaryItem)}
className="relative block bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300" className="group relative block min-h-[260px] overflow-hidden rounded-[24px] bg-[#0d2f5f] shadow-[0_18px_38px_rgba(28,52,120,0.22)] md:min-h-[320px] xl:min-h-[350px]"
> >
<div className="relative h-full min-h-[260px] md:min-h-[320px] xl:min-h-[350px]">
<ImageNext <ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={primaryItem.thumbnail?.url ?? "/thumbnail.png"}
alt={news.title} alt={primaryItem.thumbnail?.alt || primaryItem.title}
width={1200}
height={800}
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
/>
<div className="absolute inset-0 bg-linear-to-t from-[#26356d] via-[#53669b]/34 to-transparent" />
<div className="relative flex h-full flex-col justify-end p-4 md:p-5">
<span className="mb-2 inline-flex w-fit rounded-[10px] bg-[#ffc400] px-3 py-1 text-sm font-bold text-[#1d3f90]">
{getBadgeLabel(primaryItem)}
</span>
<h3 className="max-w-3xl text-[20px] font-bold leading-[1.28] text-white md:text-[28px] xl:text-[32px]">
{primaryItem.title}
</h3>
<p className="mt-2 text-base font-medium text-white/78 md:text-[17px]">
{dayjs(primaryItem.published_at || primaryItem.created_at).format("DD/MM/YYYY")}
</p>
</div>
</div>
</Link>
<div className="grid gap-4">
<div className="grid gap-4 md:grid-cols-2">
{secondaryItems.map((item) => (
<Link
key={item.id}
href={getNewsLink(item)}
className="group relative block min-h-[195px] overflow-hidden rounded-[20px] bg-[#27447f] shadow-[0_16px_32px_rgba(28,52,120,0.2)] md:min-h-[205px] xl:min-h-[215px]"
>
<div className="relative h-full min-h-[195px] md:min-h-[205px] xl:min-h-[215px]">
<ImageNext
src={item.thumbnail?.url ?? "/thumbnail.png"}
alt={item.thumbnail?.alt || item.title}
width={600} width={600}
height={400} height={420}
sizes="(max-width:640px) 100vw,(max-width:1024px) 50vw,33vw" className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.05]"
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"> <div className="absolute inset-0 bg-linear-to-t from-[#5a6796] via-[#405083]/34 to-transparent" />
<p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
{news.title} <div className="relative flex h-full flex-col justify-end p-3.5">
<span className="mb-2 inline-flex w-fit rounded-[10px] bg-[#ffc400] px-3 py-1 text-sm font-bold text-[#1d3f90]">
{getBadgeLabel(item)}
</span>
<h4 className="line-clamp-2 text-[16px] font-bold leading-[1.32] text-white md:text-[17px]">
{item.title}
</h4>
<p className="mt-1.5 text-[15px] font-medium text-white/78 md:text-base">
{dayjs(item.published_at || item.created_at).format("DD/MM/YYYY")}
</p> </p>
</div> </div>
</div>
</Link> </Link>
</SwiperSlide>
))} ))}
</Swiper> </div>
)}
<div className="overflow-hidden rounded-[28px] bg-linear-to-r from-[#214b95] to-[#2b66bb] px-5 py-5 text-white shadow-[0_18px_38px_rgba(28,52,120,0.2)] md:px-7">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<p className="text-[12px] uppercase tracking-[0.4em] text-white/80">
Quảng bá & tiếp cận
</p>
<h3 className="mt-2 max-w-[520px] text-[20px] font-extrabold uppercase leading-[1.02] xl:text-[28px]">
Cộng đồng doanh nghiệp
</h3>
</div>
<div className="w-full max-w-60 rounded-[999px] bg-white px-4 py-3 text-[#173f88] shadow-[0_10px_24px_rgba(8,25,74,0.12)]">
<div className="flex items-center gap-3 text-sm font-medium">
<Mail className="h-5 w-5 shrink-0" />
<span>info@vcci-hcm.org.vn</span>
</div>
<div className="mt-2 flex items-center gap-3 text-sm font-medium">
<Phone className="h-5 w-5 shrink-0" />
<span>+84-28-3932 5171</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> </section>
); );
} }
......
src/app/(main)/(home)/components/members/index.tsx
View file @ c03ea16b
'use client';
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import memberImages from "@/constants/memberImages"; import memberImages from "@/constants/memberImages";
import { ChevronsRight } from "lucide-react"; import {
getAdminNewsSeed,
} from "@/mockdata/admin-news";
import Link from "next/link"; import Link from "next/link";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/grid";
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import BASE_URL from "@/links/index";
import { useGetNews } from "@/api/endpoints/news";
import { Spinner } from "@/components/ui/spinner";
const Members = () => { const memberConnectionItems = getAdminNewsSeed()
const { data, isLoading } = useGetNews<GetNewsResponseType>( .filter(
{ (item) =>
filters: `page_config.code @=ket-noi-hoi-vien`, item.type === "tintuc" &&
} !item.is_hidden &&
(item.category_ids.includes("cat-member-connection") ||
item.tagsearch_values.some((tag) => tag.toLowerCase().includes("kết nối hội viên"))),
)
.sort(
(left, right) =>
new Date(right.published_at || right.created_at).getTime() -
new Date(left.published_at || left.created_at).getTime(),
); );
function Members() {
const featuredConnection = memberConnectionItems[0];
return ( return (
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0"> <section className="flex flex-col gap-5 pb-8 xl:flex-row xl:items-stretch">
{/* LEFT: HỘI VIÊN TIÊU BIỂU */} <aside className="flex-1 rounded-[22px] bg-[#f7b500] p-4 shadow-[0_18px_34px_rgba(247,181,0,0.18)] md:p-5">
<aside className="w-full lg:w-1/3 flex-1 bg-[#e8c518] p-5"> <div className="flex items-start justify-between gap-3">
<div className="flex justify-between items-center mb-3"> <div>
<h2 className="text-xl font-bold uppercase text-[#063e8e]"> <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#20449a] md:text-[34px]">
Hội viên tiêu biểu Hội viên tiêu biểu
</h2> </h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-white" />
</div>
<Link <Link
href="/danh-ba-hoi-vien" href="/danh-ba-hoi-vien"
className="text-[#063e8e] hover:underline text-sm font-medium" className="pt-1 text-sm font-semibold text-[#1e2f5e] transition-colors hover:text-[#20449a]"
> >
<ChevronsRight /> Xem thêm
</Link> </Link>
</div> </div>
<hr className="border-[#063e8e] mb-5" /> <div className="mt-4 border-t border-[#e7aa00] pt-5" />
<Swiper <div className="grid gap-4 sm:grid-cols-3">
modules={[Autoplay]} {memberImages.slice(0, 3).map((src, index) => (
autoplay={{ delay: 4000, disableOnInteraction: false }} <div
loop key={src}
slidesPerView={3} className="rounded-[24px] bg-white p-[7px] shadow-[0_10px_22px_rgba(158,114,0,0.16)]"
spaceBetween={16}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="partner-swiper"
> >
{memberImages.map((src, i) => ( <div className="flex aspect-[1.06/1] items-center justify-center overflow-hidden rounded-[18px] bg-[#f4f7fb] px-4 py-5">
<SwiperSlide key={i}>
<div className="flex justify-center items-center bg-white rounded-lg shadow p-3">
<ImageNext <ImageNext
src={src} src={src}
alt={`member-${i}`} alt={`Hội viên tiêu biểu ${index + 1}`}
width={160} width={320}
height={160} height={220}
sizes="(max-width:640px) 25vw,(max-width:1024px) 15vw,10vw" className="max-h-full max-w-full object-contain"
className="object-contain w-full h-full"
/> />
</div> </div>
</SwiperSlide> </div>
))} ))}
</Swiper> </div>
</aside> </aside>
{/* RIGHT: KẾT NỐI HỘI VIÊN */} <aside className="w-full xl:w-[31%] xl:min-w-[320px]">
{isLoading ? ( <div className="mb-4 flex items-start justify-between gap-3">
<div className="flex justify-center items-center w-full h-64"> <div>
<Spinner /> <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
</div>
) : (
<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-[#063e8e]">
Kết nối hội viên Kết nối hội viên
</h2> </h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-[#f7b500]" />
</div> </div>
<hr className="border-[#063e8e] mb-5" /> </div>
<Swiper
modules={[Autoplay]} {featuredConnection ? (
autoplay={{ delay: 4000, disableOnInteraction: false }} <Link
loop href="/danh-ba-hoi-vien"
className="partner-swiper" className="block overflow-hidden rounded-[20px] shadow-[0_16px_32px_rgba(31,59,124,0.12)]"
> >
{data?.responseData.rows.map((news: NewsItem) => ( <div className="aspect-[1.25/1] overflow-hidden rounded-[20px]">
<SwiperSlide key={news.id}>
<a href={`${news.external_link}`}>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<ImageNext <ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={featuredConnection.thumbnail?.url ?? "/thumbnail.png"}
alt={news.title} alt={featuredConnection.thumbnail?.alt || featuredConnection.title}
width={600} width={520}
height={400} height={420}
sizes="(max-width:768px) 100vw,50vw" className="h-full w-full object-cover"
className="w-full h-full object-cover"
/> />
<div className="absolute bg-white opacity-90 bottom-5 left-5 right-5 p-5">
<p className="text-[#063e8e] font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div> </div>
</div> </Link>
</a> ) : null}
</SwiperSlide>
))}
</Swiper>
</aside> </aside>
)}
</section> </section>
); );
}; }
export default Members; export default Members;
src/app/(main)/(home)/components/news/index.tsx
View file @ c03ea16b
import { useGetNews } from "@/api/endpoints/news"; 'use client';
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import Link from "next/link";
import BASE_URL from "@/links/index";
import { ChevronsRight } from "lucide-react";
import { useState } from "react";
import stripImagesAndHtml from "@/helpers/stripImageAndHtml"; import stripImagesAndHtml from "@/helpers/stripImageAndHtml";
import CardNews from "./components/card-news"; import {
import { Spinner } from "@/components/ui/spinner"; type AdminNewsItem,
getAdminNewsSeed,
} from "@/mockdata/admin-news";
import dayjs from "dayjs";
import Link from "next/link";
import { useMemo, useState } from "react";
const News = () => { const tabs = [
const [tab, setTab] = useState("all"); { id: "all", label: "Tất cả" },
{ id: "tin-vcci", label: "Tin VCCI" },
{ id: "tin-kinh-te", label: "Tin Kinh Tế" },
{ id: "chuyen-de", label: "Chuyên Đề" },
];
const allNewsItems = getAdminNewsSeed().filter(
(item) => item.type === "tintuc" && !item.is_hidden,
);
function getTabLabel(item: AdminNewsItem) {
const tags = item.tagsearch_values.map((tag) => tag.toLowerCase());
if (tags.some((tag) => tag.includes("kinh tế") || tag.includes("vĩ mô"))) {
return "Tin Kinh Tế";
}
if (tags.some((tag) => tag.includes("chuyên đề") || tag.includes("cẩm nang"))) {
return "Chuyên Đề";
}
return "Tin VCCI";
}
function matchesTab(item: AdminNewsItem, tab: string) {
if (tab === "all") return true;
const tags = item.tagsearch_values.map((value) => value.toLowerCase());
if (tab === "tin-vcci") {
return tags.some((tag) => tag.includes("tin vcci") || tag.includes("hợp tác"));
}
if (tab === "tin-kinh-te") {
return tags.some((tag) => tag.includes("kinh tế") || tag.includes("vĩ mô"));
}
const { data: newsSpecial, isLoading: isLoadingSpecial } = useGetNews<GetNewsResponseType>({ pageSize: '1' }); if (tab === "chuyen-de") {
const { data: newsFilters, isLoading: isLoadingFilters } = useGetNews<GetNewsResponseType>( return tags.some((tag) => tag.includes("chuyên đề") || tag.includes("cẩm nang"));
{
pageSize: '5',
filters: tab === "all" ? `` : `page_config.code @=${tab}`,
} }
return true;
}
function News() {
const [tab, setTab] = useState("all");
const filteredItems = useMemo(
() => allNewsItems.filter((item) => matchesTab(item, tab)),
[tab],
); );
const featuredArticle = filteredItems[0] ?? allNewsItems[0];
const listArticles = filteredItems.slice(1, 5);
if (!featuredArticle) return null;
return ( return (
<div className="flex-1"> <div className="flex-1">
<div className="flex justify-between items-center"> <div className="mb-6 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
<Link <div>
href="/thong-tin-truyen-thong/tin-vcci/" <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]"
>
Tin tức Tin tức
</Link> </h2>
<Link <div className="mt-3 h-[5px] w-[68px] rounded-full bg-[#f7b500]" />
href="/thong-tin-truyen-thong/tin-vcci/"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</Link>
</div> </div>
<hr className="border-[#063e8e] mb-4" />
<div className="flex flex-col md:flex-row gap-5"> <div className="flex flex-wrap gap-3 xl:justify-end">
{isLoadingSpecial ? ( {tabs.map((item) => {
<div className="flex justify-center items-center flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3"> const active = item.id === tab;
<Spinner />
return (
<button
key={item.id}
type="button"
onClick={() => setTab(item.id)}
className={`rounded-full px-5 py-2.5 text-[14px] font-semibold transition-all ${
active
? "bg-[#1f5ba9] text-white shadow-[0_10px_20px_rgba(31,91,169,0.18)]"
: "bg-[#f4f7fb] text-[#7f8eab] hover:bg-[#eaf0f8]"
}`}
>
{item.label}
</button>
);
})}
</div>
</div> </div>
) : (
newsSpecial?.responseData.rows <div className="grid gap-4 xl:grid-cols-[minmax(0,1.02fr)_minmax(320px,0.98fr)]">
.slice(0, 1) <div>
.map((news: NewsItem) => (
<Link <Link
key={news.id} href="/hoat-dong/tin-tuc"
href={`${news.external_link}`} className="block h-full overflow-hidden rounded-[22px] border border-[#dbe4f2] bg-white shadow-[0_8px_24px_rgba(31,59,124,0.08)]"
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 bg-white"
> >
<div className="w-full aspect-3/2 overflow-hidden"> <div className="aspect-[1.75/1] overflow-hidden">
<ImageNext <ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`} src={featuredArticle.thumbnail?.url ?? "/thumbnail.png"}
alt={news.title} alt={featuredArticle.thumbnail?.alt || featuredArticle.title}
width={600} width={720}
height={400} height={580}
sizes="(max-width:768px) 100vw,50vw" className="h-full w-full object-cover"
className="w-full h-full object-cover"
/> />
</div> </div>
<div className="flex-1 p-5 pt-1"> <div className="space-y-1.5 p-3">
<p className="text-[#063E8E] font-bold pb-2 text-xl line-clamp-2"> <span className="inline-flex text-[14px] font-bold text-[#e2a500]">
{news.title} {getTabLabel(featuredArticle)}
</span>
<h3 className="line-clamp-2 text-[16px] font-bold leading-[1.28] text-[#20408f] md:text-[17px]">
{featuredArticle.title}
</h3>
<p className="line-clamp-2 text-[13px] leading-[1.45] text-[#6c7b96]">
{stripImagesAndHtml(featuredArticle.summary)}
</p>
<p className="text-[14px] text-[#8a9bb6]">
{dayjs(featuredArticle.published_at || featuredArticle.created_at).format("DD/MM/YYYY")}
</p> </p>
<p className="line-clamp-4 text-justify">{stripImagesAndHtml(news.description)}</p>
</div> </div>
</Link> </Link>
))
)}
<div className="w-full md:w-1/2">
<div className="flex flex-wrap gap-2 sm:gap-3 mb-5">
<button
className={`flex-1 py-[3px] text-sm transition-colors cursor-pointer ${tab === "all"
? " bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab("all")}>
Tất cả
</button>
<button
className={`flex-1 py-[3px] text-[14px] transition-colors cursor-pointer ${`tin-vcci` === tab
? "bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab("tin-vcci")}
>
Tin VCCI
</button>
<button
className={`flex-1 py-[3px] text-[14px] transition-colors cursor-pointer ${`tin-kinh-te` === tab
? "bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab("tin-kinh-te")}
>
Tin Kinh Tế
</button>
<button
className={`flex-1 py-[3px] text-[14px] transition-colors cursor-pointer ${`chuyen-de` === tab
? "bg-[#d3d3d3] text-[#063e8e] font-semibold"
: "border-gray-300 text-[#363636] bg-[#e8e8e8] hover:bg-[#e8e8e8] hover:text-[#063e8e] font-semibold"
}`}
onClick={() => setTab("chuyen-de")}
>
Chuyên Đề
</button>
</div> </div>
{isLoadingFilters ? ( <div className="xl:flex xl:h-full xl:flex-col">
<div className="flex justify-center py-10"> <div className="space-y-3 xl:flex xl:flex-1 xl:flex-col">
<Spinner /> {listArticles.map((news) => (
<Link
key={news.id}
href="/hoat-dong/tin-tuc"
className="block rounded-[18px] border border-[#dbe4f2] bg-white px-4 py-2.5 shadow-[0_8px_24px_rgba(31,59,124,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_14px_28px_rgba(31,59,124,0.12)] xl:flex-1"
>
<h4 className="line-clamp-2 text-[15px] font-bold leading-[1.28] text-[#21408f]">
{news.title}
</h4>
<p className="mt-1 text-[13px] text-[#8a9bb6]">
{dayjs(news.published_at || news.created_at).format("DD/MM/YYYY")}
</p>
</Link>
))}
</div> </div>
) : (
newsFilters?.responseData?.rows.slice(0, 4).map((news) => (
<CardNews key={news.id} news={news} />
))
)}
</div> </div>
</div> </div>
</div> </div>
......
src/app/(main)/(home)/components/policies-and-laws/index.tsx
View file @ c03ea16b
import { useGetNews } from "@/api/endpoints/news"; 'use client';
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next"; import {
import { Spinner } from "@/components/ui/spinner"; type AdminNewsItem,
import { ChevronsRight } from "lucide-react"; getAdminNewsSeed,
} from "@/mockdata/admin-news";
import dayjs from "dayjs";
import { ChevronRight } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import BASE_URL from "@/links/index";
import CardNews from "./card-news";
const PolicyAndLaws = () => { const policyItems = getAdminNewsSeed()
const { data, isLoading } = useGetNews<GetNewsResponseType>( .filter(
{ (item) =>
pageSize: '5', item.type === "tintuc" &&
filters: `page_config.code @=phap-luat`, !item.is_hidden &&
} (item.category_ids.includes("cat-policy-law") ||
item.category_ids.includes("cat-policy") ||
item.tagsearch_values.some((tag) => {
const normalized = tag.toLowerCase();
return normalized.includes("chính sách") || normalized.includes("pháp luật");
})),
)
.sort(
(left, right) =>
new Date(right.published_at || right.created_at).getTime() -
new Date(left.published_at || left.created_at).getTime(),
); );
function formatPublishDate(item: AdminNewsItem) {
return dayjs(item.published_at || item.created_at).format("DD/MM/YYYY");
}
function PolicyAndLaws() {
const [featuredItem, ...listItems] = policyItems;
if (!featuredItem) return null;
return ( return (
<div className="flex-1"> <section className="flex-1">
<div className="flex justify-between items-center"> <div className="mb-4 flex items-center justify-between gap-3">
<div>
<h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
Chính sách & pháp luật
</h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-[#f7b500]" />
</div>
<Link <Link
href="/thong-tin-truyen-thong/phap-luat" href="/thong-tin-truyen-thong/phap-luat"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]" className="text-[#24469c] transition-colors hover:text-[#1b55a1]"
> >
Chính sách & pháp luật <ChevronRight className="h-5 w-5" />
</Link> </Link>
</div>
<div className="space-y-2.5">
{[featuredItem, ...listItems.slice(0, 2)].map((item, index) => (
<Link <Link
key={item.id}
href="/thong-tin-truyen-thong/phap-luat" href="/thong-tin-truyen-thong/phap-luat"
className="text-[#063e8e] text-sm sm:text-base" className={`flex gap-3 rounded-[14px] px-0.5 py-1 transition-colors hover:bg-[#f8fafe] ${
index === 0 ? "pt-0.5" : ""
}`}
> >
<ChevronsRight /> <span className="mt-1 h-[40px] w-[2px] shrink-0 rounded-full bg-[#f7b500]" />
</Link> <div className="min-w-0">
</div> <h3 className="line-clamp-2 text-[15px] leading-[1.45] text-[#264798] md:text-[16px]">
<hr className="border-[#063e8e] mb-4" /> {item.title}
<div className="pt-2"> </h3>
{isLoading ? ( <p className="mt-1.5 text-[13px] text-[#9aa8c1]">{formatPublishDate(item)}</p>
<div className="container w-full h-[80vh] flex justify-center items-center">
<Spinner />
</div>
) : (
<>
{data?.responseData.rows
.slice(0, 1)
.map((news: NewsItem) => (
<Link key={news.id} href={`${news.external_link}`}>
<div className="w-full aspect-3/2 relative overflow-hidden mb-5">
<ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
width={600}
height={400}
sizes="(max-width:768px) 100vw,50vw"
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-[#063e8e] font-semibold text-sm sm:text-base z-10 line-clamp-3">
{news.title}
</p>
</div>
</div> </div>
</Link> </Link>
))} ))}
{data?.responseData.rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
))}
</>
)}
</div>
</div> </div>
</section>
); );
} }
......
src/app/(main)/(home)/components/quick-links/index.tsx
View file @ c03ea16b
'use client';
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import Link from "next/link"; import Link from "next/link";
const quickLinks = [
{
href: "https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/",
label: "Doanh nghiệp kiến nghị về chính sách và pháp luật",
},
{
href: "https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/",
label: "Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam",
},
];
function QuickLinks() { function QuickLinks() {
return ( return (
<aside className="w-full lg:w-[30%]"> <aside className="w-full xl:grid xl:w-[32%] xl:grid-rows-[0.74fr_0.88fr] xl:gap-4">
<div className="flex justify-between items-center"> <div className="rounded-[22px] border border-[#dbe4f2] bg-white p-4 shadow-[0_8px_24px_rgba(31,59,124,0.08)] xl:h-full">
<h2 className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]"> <h2 className="text-[28px] md:text-[34px] font-extrabold uppercase tracking-tight text-[#24469c]">
Liên kết nhanh Liên kết nhanh
</h2> </h2>
</div> <div className="mt-3 h-[5px] w-[68px] rounded-full bg-[#f7b500]" />
<hr className="border-[#063e8e] mb-4" />
<div className="space-y-2 text-[#063e8e] text-sm md:text-base pb-10"> <div className="mt-4 space-y-2.5">
<div> {quickLinks.map((item) => (
<Link <Link
className="text-[#363636]" key={item.href}
href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/" href={item.href}
className="flex items-start gap-3 text-[15px] leading-[1.32] text-[#556684] transition-colors hover:text-[#21408f]"
> >
🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam <span className="mt-1 text-[#e2a500]">›</span>
<span>{item.label}</span>
</Link> </Link>
))}
</div>
</div> </div>
<div>
<Link <Link
className="text-[#363636]" href="https://hardwaretools.com.vn/"
href="https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/" className="mt-4 block overflow-hidden rounded-[28px] shadow-[0_12px_28px_rgba(31,59,124,0.14)] xl:mt-0 xl:h-full"
> >
🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật <div className="aspect-[1.55/1] overflow-hidden xl:h-full xl:aspect-auto">
</Link>
</div>
</div>
<div>
<Link href="https://hardwaretools.com.vn/">
<ImageNext <ImageNext
src="/home/20-2048x1365.webp" src="/home/20-2048x1365.webp"
alt="banner" alt="Liên kết nhanh"
width={2048} width={2048}
height={1365} height={1365}
className="h-full w-full object-cover"
/> />
</Link>
</div> </div>
</Link>
</aside> </aside>
); );
} }
......
src/app/(main)/(home)/components/video-and-patners/index.tsx
View file @ c03ea16b
'use client';
import ImageNext from "@/components/shared/image-next"; import ImageNext from "@/components/shared/image-next";
import partnerImages from "@/constants/partnerImages"; import partnerImages from "@/constants/partnerImages";
import { ChevronsRight } from "lucide-react"; import { ChevronRight, Play } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { Autoplay, Grid } from "swiper/modules"; const videos = [
import { Swiper, SwiperSlide } from "swiper/react"; {
embedSrc: "https://www.youtube.com/embed/J0Iz0iGuAXY",
import "swiper/css"; title: "VCCI-HCM 2025 IN REVIEW (ENGLISH VERSION)",
import "swiper/css/grid"; thumbnail:
"https://img.youtube.com/vi/J0Iz0iGuAXY/hqdefault.jpg",
},
{
embedSrc: "https://www.youtube.com/embed/_OnnGWv2ehM",
title: "Hội nghị Hội viên VCCI - Gala Mừng Xuân 2026",
thumbnail:
"https://img.youtube.com/vi/_OnnGWv2ehM/hqdefault.jpg",
},
];
const VideoAndPartners = () => { function VideoAndPartners() {
return ( return (
<section className="flex flex-col lg:flex-row gap-5 pb-10"> <section className="flex flex-col gap-6 pb-10 xl:flex-row xl:items-start">
{/* LEFT: VIDEO */} <div className="flex-1">
<div className="flex flex-col flex-1"> <div className="mb-5 flex items-start justify-between gap-3">
<div className="flex justify-between items-center mb-3"> <div>
<h2 className="text-xl font-bold uppercase text-[#063e8e]">Video</h2> <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
Video
</h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-[#f7b500]" />
</div>
<Link <Link
href="/video" href="/video"
className="text-[#063e8e] hover:underline text-sm font-medium" className="pt-1 text-[#24469c] transition-colors hover:text-[#1b55a1]"
> >
<ChevronsRight /> <ChevronRight className="h-5 w-5" />
</Link> </Link>
</div> </div>
<hr className="border-[#063e8e] mb-5" /> <div className="grid gap-4 md:grid-cols-2">
{videos.map((video) => (
<div className="flex flex-col md:flex-row gap-4 md:gap-6"> <a
{[ key={video.embedSrc}
{ href={video.embedSrc.replace("/embed/", "/watch?v=")}
src: "https://www.youtube.com/embed/J0Iz0iGuAXY", target="_blank"
title: "VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)", rel="noreferrer"
}, className="overflow-hidden rounded-[16px] border border-[#e5ebf4] bg-white shadow-[0_10px_22px_rgba(31,59,124,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_16px_30px_rgba(31,59,124,0.12)]"
{ >
src: "https://www.youtube.com/embed/_OnnGWv2ehM", <div className="group relative aspect-[1.95/1] overflow-hidden">
title: "Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025", <ImageNext
}, src={video.thumbnail}
].map((video, i) => ( alt={video.title}
<div key={i} className="w-full md:w-1/2"> width={640}
<div className="aspect-video rounded-lg overflow-hidden shadow"> height={440}
<iframe className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
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 className="absolute inset-0 bg-black/18" />
<div className="absolute inset-0 flex items-center justify-center">
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-white/92 text-[#2a4ea3] shadow-[0_10px_26px_rgba(0,0,0,0.18)]">
<Play className="ml-1 h-5 w-5 fill-current" />
</span>
</div>
</div> </div>
<p className="mt-2 text-sm text-gray-700 font-medium">
<div className="px-4 py-2.5">
<p className="line-clamp-2 text-[14px] font-semibold leading-[1.32] text-[#264798] md:text-[15px]">
{video.title} {video.title}
</p> </p>
</div> </div>
</a>
))} ))}
</div> </div>
</div> </div>
{/* RIGHT: ĐỐI TÁC */} <aside className="w-full xl:w-[43%]">
<aside className="w-full lg:w-[30%]"> <div className="mb-5 flex items-start justify-between gap-3">
<div className="flex justify-between items-center mb-3"> <div>
<h2 className="text-xl font-bold uppercase text-[#063e8e]"> <h2 className="text-[28px] font-extrabold uppercase tracking-tight text-[#24469c] md:text-[34px]">
Đối tác Đối tác
</h2> </h2>
<div className="mt-2.5 h-[4px] w-[40px] rounded-full bg-[#f7b500]" />
</div>
</div> </div>
<hr className="border-[#063e8e] mb-5" /> <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
{partnerImages.slice(0, 6).map((src, index) => (
<div className="pb-10"> <div
<Swiper key={src}
modules={[Autoplay, Grid]} className="flex h-[96px] items-center justify-center rounded-[14px] border border-[#edf1f7] bg-white px-5 py-4 shadow-[0_8px_20px_rgba(31,59,124,0.05)]"
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: "row" }}
slidesPerView={3}
spaceBetween={16}
breakpoints={{
0: { slidesPerView: 3, spaceBetween: 10, grid: { rows: 2 } },
640: { slidesPerView: 3, spaceBetween: 16, grid: { rows: 2 } },
1024: { slidesPerView: 3, spaceBetween: 24, grid: { rows: 2 } },
}}
className="partner-swiper"
> >
{partnerImages.map((src, i) => (
<SwiperSlide key={i}>
<div className="flex justify-center items-center bg-white rounded-lg shadow p-3 w-[120px] h-[120px]">
<ImageNext <ImageNext
src={src} src={src}
alt={`partner-${i}`} alt={`Đối tác ${index + 1}`}
width={120} width={140}
height={120} height={72}
className="object-contain w-full h-full" className="max-h-full w-full object-contain"
/> />
</div> </div>
</SwiperSlide>
))} ))}
</Swiper>
</div> </div>
</aside> </aside>
</section> </section>
); );
}; }
export default VideoAndPartners; export default VideoAndPartners;
src/app/(main)/(home)/page.tsx
View file @ c03ea16b
'use client' 'use client'
import Link from 'next/link'
import ImageNext from '@/components/shared/image-next';
import FeaturedNews from "./components/featured-news"; import FeaturedNews from "./components/featured-news";
import QuickLinks from "./components/quick-links"; import QuickLinks from "./components/quick-links";
import News from "./components/news"; import News from "./components/news";
...@@ -18,9 +16,9 @@ const Page = () => { ...@@ -18,9 +16,9 @@ const Page = () => {
<div> <div>
<Banner /> <Banner />
{/* contents */} {/* contents */}
<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-6">
<FeaturedNews /> <FeaturedNews />
<div> {/* <div>
<Link href="https://hardwaretools.com.vn/"> <Link href="https://hardwaretools.com.vn/">
<ImageNext <ImageNext
src="/home/Standard-Banner-1-2024.png.webp" src="/home/Standard-Banner-1-2024.png.webp"
...@@ -29,21 +27,21 @@ const Page = () => { ...@@ -29,21 +27,21 @@ const Page = () => {
height={720} height={720}
/> />
</Link> </Link>
</div> </div> */}
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0"> <section className="flex flex-col lg:flex-row pb-16 gap-5 mb-0">
<News /> <News />
<QuickLinks /> <QuickLinks />
</section > </section >
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" > <section className="flex flex-col gap-5 xl:flex-row xl:items-stretch" >
<Events /> <Events />
<EventsCalendar /> <EventsCalendar />
</section > </section >
<div className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" > <div className="flex flex-col lg:flex-row gap-5 pb-10 mb-0" >
<div className="flex flex-col flex-1"> <div className="flex flex-col flex-1">
<div> {/* <div>
<Link href="https://vcci-hcm.org.vn/wp-content/uploads/2022/11/MEDIA-KIT_VCCI-HCM-2022-Final.pdf"> <Link href="https://vcci-hcm.org.vn/wp-content/uploads/2022/11/MEDIA-KIT_VCCI-HCM-2022-Final.pdf">
<ImageNext <ImageNext
src="/home/Standard-Banner-1-2024.png.webp" src="/home/Standard-Banner-1-2024.png.webp"
...@@ -52,7 +50,7 @@ const Page = () => { ...@@ -52,7 +50,7 @@ const Page = () => {
height={720} height={720}
/> />
</Link> </Link>
</div> </div> */}
<section className="flex flex-col md:flex-row gap-5 pt-8"> <section className="flex flex-col md:flex-row gap-5 pt-8">
<BusinessOpportunities /> <BusinessOpportunities />
...@@ -60,7 +58,7 @@ const Page = () => { ...@@ -60,7 +58,7 @@ const Page = () => {
</section> </section>
</div> </div>
<div className="w-full lg:w-[30%] justify-center items-start flex"> {/* <div className="w-full lg:w-[30%] justify-center items-start flex">
<Link href="https://smartgara.ecaraid.com/"> <Link href="https://smartgara.ecaraid.com/">
<ImageNext <ImageNext
src="/home/eCarAid_web_banner_600x400.webp" src="/home/eCarAid_web_banner_600x400.webp"
...@@ -69,7 +67,7 @@ const Page = () => { ...@@ -69,7 +67,7 @@ const Page = () => {
height={400} height={400}
/> />
</Link> </Link>
</div> </div> */}
</div > </div >
<Members /> <Members />
......
src/app/(main)/_lib/layout/footer.tsx
View file @ c03ea16b
"use client"; "use client";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import { import {
Facebook, Facebook,
Linkedin, Linkedin,
Mail, Mail,
MailCheck,
MapPin, MapPin,
Phone, Phone,
Printer, Printer,
SendHorizonal,
Twitter, Twitter,
Youtube, Youtube,
} from "lucide-react"; } from "lucide-react";
import Image from "next/image"; import Link from "next/link";
import vietnamMap from "@/assets/vietnam-map-white.png";
const socialLinks = [
{ icon: <Facebook className="h-5 w-5" />, link: "https://www.facebook.com/VCCIHCMC/" },
{ icon: <Twitter className="h-5 w-5" />, link: "https://twitter.com/VCCI_HCM" },
{ icon: <Youtube className="h-5 w-5" />, link: "https://www.youtube.com/user/VCCIHCMC" },
{
icon: <Linkedin className="h-5 w-5" />,
link: "https://www.linkedin.com/company/vietnam-chamber-of-commerce-and-industry-ho-chi-minh-city-branch-vcci-hcm-?trk=biz-companies-cym",
},
];
const quickLinks = [
{ label: "Giới thiệu", href: "/gioi-thieu" },
{ label: "Hội viên", href: "/danh-ba-hoi-vien" },
{ label: "Hoạt động", href: "/hoat-dong/tin-tuc" },
{ label: "Xúc tiến Thương mại", href: "/xuc-tien-thuong-mai/co-hoi/" },
];
function Footer() { function Footer() {
const emailRef = useRef<HTMLInputElement>(null); const emailRef = useRef<HTMLInputElement>(null);
const checkBoxRef = useRef<HTMLInputElement>(null); const checkBoxRef = useRef<HTMLInputElement>(null);
const [emailError, setEmailError] = useState(false); const [emailError, setEmailError] = useState(false);
const [chechError, setCheckError] = useState(false); const [checkError, setCheckError] = useState(false);
const handleSubmit = () => { const handleSubmit = () => {
if (!checkBoxRef.current?.checked) setCheckError(true);
else setCheckError(false);
if (emailRef.current?.value === "") setEmailError(true); if (emailRef.current?.value === "") setEmailError(true);
else setEmailError(false); else setEmailError(false);
if (!checkBoxRef.current?.checked) setCheckError(true);
else setCheckError(false);
}; };
return ( return (
<div className="overflow-hidden w-full"> <footer className="w-full bg-[#202f67] text-white">
<div className="py-5 xl:p-5 bg-[#e3e3e3]"> <div className="container mx-auto px-5 py-10 sm:px-6 lg:px-10 lg:py-12">
<div className="container w-full flex flex-col lg:flex-row m-auto lg:flex-nowrap flex-wrap relative gap-10"> <div className="grid gap-10 lg:grid-cols-[1.15fr_1.05fr_0.9fr]">
<div className="z-10 w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5"> <div>
<h2 className="text-[#063E8E] text-[20px] font-bold text-left"> <h2 className="text-xl md:text-2xl font-extrabold uppercase tracking-tight">
ĐĂNG KÝ NHẬN THÔNG TIN VCCI Đăng ký nhận thông tin VCCI
</h2> </h2>
<div className="h-0.5 w-14 bg-[#063e8e] mx-0"></div> <div className="mt-2.5 h-[4px] w-[48px] rounded-full bg-[#f7b500]" />
<div className="flex flex-col gap-2"> <div className="mt-5">
<div className="flex gap-2 items-center w-full"> <div className="flex w-full max-w-[350px] gap-2">
<input <input
ref={emailRef} ref={emailRef}
className="h-12 flex-1 px-3 outline-hidden bg-white rounded-sm text-[14px] w-full" className="h-12 flex-1 rounded-[4px] border border-[#31458d] bg-[#29418f] px-4 text-[15px] text-white placeholder:text-[#84a1ef] outline-hidden"
type="email" type="email"
placeholder="Nhập email của bạn" placeholder="Nhập email của bạn"
/> />
<button <button
onClick={handleSubmit} onClick={handleSubmit}
className="group w-14 h-12 flex items-center justify-center cursor-pointer bg-white rounded-sm text-[#063e8e]" className="flex h-12 w-12 items-center justify-center rounded-[4px] bg-[#f7b500] text-[#203067] transition-colors hover:bg-[#ffca30]"
> >
<Mail size={20} className="group-hover:hidden" /> <SendHorizonal className="h-5 w-5" />
<MailCheck size={20} className="group-hover:block hidden" />
</button> </button>
</div> </div>
{emailError && (
<p className="text-[#F56C6C] text-[12px]"> {emailError ? (
Thông tin bắt buộc <p className="mt-2 text-[12px] text-[#ff9b9b]">Thông tin bắt buộc</p>
</p> ) : null}
)}
<div className="flex items-center gap-2"> <div className="mt-3 flex items-center gap-2">
<input ref={checkBoxRef} type="checkbox" id="check" /> <input
<label className="text-[14px] text-[#636363]" htmlFor="check"> ref={checkBoxRef}
type="checkbox"
id="footer-check"
className="h-4 w-4 rounded border-white/30 bg-transparent accent-[#f7b500]"
/>
<label
className="text-[13px] text-[#86b8ff]"
htmlFor="footer-check"
>
Đồng ý với Điều khoản nhận email Đồng ý với Điều khoản nhận email
</label> </label>
</div> </div>
{chechError && (
<p className="text-[#F56C6C] text-[12px]"> {checkError ? (
<p className="mt-2 text-[12px] text-[#ff9b9b]">
Bạn cần đồng ý với Điều khoản nhận email Bạn cần đồng ý với Điều khoản nhận email
</p> </p>
)} ) : null}
</div> </div>
</div> </div>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5"> <div>
<h2 className="text-[#063E8E] text-[20px] font-bold text-left"> <h2 className="text-xl md:text-2xl font-extrabold uppercase tracking-tight">
LIÊN HỆ Liên hệ
</h2> </h2>
<div className="h-0.5 w-14 bg-[#063e8e] mx-0"></div> <div className="mt-2.5 h-[4px] w-[48px] rounded-full bg-[#f7b500]" />
<p className="text-[14px] font-semibold text-justify text-[#363636]"> <div className="mt-5 space-y-4">
<p className="max-w-[420px] text-[16px] font-semibold leading-[1.5] text-[#dce7ff]">
LIÊN ĐOÀN THƯƠNG MẠI & CÔNG NGHIỆP VIỆT NAM - CHI NHÁNH KHU VỰC THÀNH PHỐ HỒ CHÍ MINH LIÊN ĐOÀN THƯƠNG MẠI & CÔNG NGHIỆP VIỆT NAM - CHI NHÁNH KHU VỰC THÀNH PHỐ HỒ CHÍ MINH
</p> </p>
<div className="flex flex-col items-start gap-3"> <div className="space-y-2.5 text-[15px] text-[#c7d8ff]">
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]"> <div className="flex items-start gap-3">
<MapPin size={16} className="text-[#124588]" /> <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[#f7b500]" />
<span>171 Võ Thị Sáu, Phường Xuân Hoà, TP. HCM</span> <span>171 Võ Thị Sáu, Phường Xuân Hòa, TP. HCM</span>
</div> </div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]"> <div className="flex items-center gap-3">
<Phone size={16} className="text-[#124588]" /> <Phone className="h-4 w-4 shrink-0 text-[#f7b500]" />
<span>+84 28 3932 6598</span> <span>+84 28 3932 6598</span>
</div> </div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]"> <div className="flex items-center gap-3">
<Printer size={16} className="text-[#124588]" /> <Printer className="h-4 w-4 shrink-0 text-[#f7b500]" />
<span>+84 28 3932 5472</span> <span>+84 28 3932 5472</span>
</div> </div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]"> <div className="flex items-center gap-3">
<Mail size={16} className="text-[#124588]" /> <Mail className="h-4 w-4 shrink-0 text-[#f7b500]" />
<a href="mailto:info@vcci-hcm.org.vn"> <a href="mailto:info@vcci-hcm.org.vn">info@vcci-hcm.org.vn</a>
info@vcci-hcm.org.vn </div>
</a>
</div> </div>
</div> </div>
</div> </div>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5"> <div>
<h2 className="text-[#063E8E] text-[20px] font-bold text-left"> <h2 className="text-xl font-extrabold uppercase tracking-tight md:text-2xl">
KẾT NỐI Kết nối
</h2> </h2>
<div className="h-[2px] w-14 bg-[#063e8e] mx-0"></div> <div className="mt-2.5 h-[4px] w-[48px] rounded-full bg-[#f7b500]" />
<div className="w-full overflow-hidden rounded-md">
<iframe <div className="mt-5 flex flex-wrap gap-3">
className="w-full sm:h-[140px]" {socialLinks.map((item) => (
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FVCCIHCMC%3Fref%3Dembed_page&tabs=&width=340&height=130&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen={true}
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
</div>
<div className="flex gap-3 justify-start">
{[
{ icon: <Facebook size={20} />, link: "https://www.facebook.com/VCCIHCMC/" },
{ icon: <Twitter size={20} />, link: "https://twitter.com/VCCI_HCM" },
{ icon: <Youtube size={20} />, link: "https://www.youtube.com/user/VCCIHCMC" },
{ icon: <Linkedin size={20} />, link: "https://www.linkedin.com/company/vietnam-chamber-of-commerce-and-industry-ho-chi-minh-city-branch-vcci-hcm-?trk=biz-companies-cym" },
].map((s, i) => (
<a <a
key={i} key={item.link}
href={s.link} href={item.link}
target="_blank" target="_blank"
className="h-[38px] w-[38px] sm:h-[42px] sm:w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition" rel="noreferrer"
className="flex h-11 w-11 items-center justify-center rounded-full bg-[#2a4ec4] text-white transition-colors hover:bg-[#3b60da]"
> >
{s.icon} {item.icon}
</a> </a>
))} ))}
</div> </div>
</div>
<div className="z-0 absolute -left-20 -top-20 hidden xl:block"> <div className="mt-5 space-y-2 text-[15px] text-[#c7d8ff]">
<Image className="size-[500px] object-contain" src={vietnamMap} alt="" /> {quickLinks.map((item) => (
<div className="footer-bg-pin" style={{ top: "144px", left: "145px" }}></div> <Link
<div className="footer-bg-pin" style={{ top: "238px", left: "260px" }}></div> key={item.href}
<div className="footer-bg-pin" style={{ top: "342px", left: "162px" }}></div> href={item.href}
<div className="footer-bg-pin" style={{ top: "395px", left: "215px" }}></div> className="block transition-colors hover:text-white"
>
{item.label}
</Link>
))}
</div> </div>
</div> </div>
</div> </div>
<div className="bg-[#032248] h-20 flex items-center justify-center"> <div className="mt-10 border-t border-[#2946a3] pt-5 text-center text-[14px] text-[#62a7ff]">
<div className="container w-full p-5 text-left">
<p className="text-[14px] text-white text-center lg:text-left">
© Bản quyền VCCI-HCM | All rights reserved © Bản quyền VCCI-HCM | All rights reserved
</p>
</div>
</div> </div>
<style jsx>{`
@keyframes newpulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(10);
opacity: 0;
}
}
.footer-bg-pin {
position: absolute;
z-index: 2;
width: 6px;
height: 6px;
background-color: #facc15;
border-radius: 50%;
}
.footer-bg-pin::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform-origin: center;
animation: newpulse 2s infinite ease-in-out;
z-index: -1;
}
`}</style>
</div> </div>
</footer>
); );
} }
......
src/mockdata/admin-news.ts
View file @ c03ea16b
...@@ -189,7 +189,7 @@ const newsSeed: AdminNewsItem[] = [ ...@@ -189,7 +189,7 @@ const newsSeed: AdminNewsItem[] = [
type: "tintuc", type: "tintuc",
header_category_id: "activity-news", header_category_id: "activity-news",
category_ids: ["cat-news", "cat-activity"], category_ids: ["cat-news", "cat-activity"],
tagsearch_values: ["Doanh nghiệp hội viên", "Chuyển đổi số"], tagsearch_values: ["Tin VCCI", "Doanh nghiệp hội viên", "Chuyển đổi số"],
is_featured: true, is_featured: true,
thumbnail: toImageRef(mediaSeed[2]), thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false, is_hidden: false,
...@@ -236,7 +236,7 @@ const newsSeed: AdminNewsItem[] = [ ...@@ -236,7 +236,7 @@ const newsSeed: AdminNewsItem[] = [
type: "tintuc", type: "tintuc",
header_category_id: "activity-events", header_category_id: "activity-events",
category_ids: ["cat-event"], category_ids: ["cat-event"],
tagsearch_values: ["Hội thảo", "Đăng ký"], tagsearch_values: ["Sự kiện", "Đăng ký"],
is_featured: false, is_featured: false,
thumbnail: toImageRef(mediaSeed[3]), thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false, is_hidden: false,
...@@ -306,6 +306,916 @@ const newsSeed: AdminNewsItem[] = [ ...@@ -306,6 +306,916 @@ const newsSeed: AdminNewsItem[] = [
}, },
], ],
}, },
{
id: "admin-news-04",
title: "Diễn đàn xúc tiến thương mại khu vực phía Nam thu hút hơn 300 doanh nghiệp tham dự",
slug: "dien-dan-xuc-tien-thuong-mai-khu-vuc-phia-nam-thu-hut-hon-300-doanh-nghiep-tham-du",
summary:
"<p>Chương trình quy tụ doanh nghiệp sản xuất, logistics và các đơn vị hỗ trợ xuất khẩu nhằm tạo mạng lưới kết nối giao thương thực chất.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news", "cat-activity"],
tagsearch_values: ["Tin Kinh Tế", "Xúc tiến thương mại", "Kết nối giao thương"],
is_featured: true,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-12T08:20:00.000Z",
updated_at: "2026-05-12T10:00:00.000Z",
published_at: "2026-05-12T08:20",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Trung tâm Hội chợ và Triển lãm Sài Gòn",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-04-a",
type: "text",
position: 1,
content:
"<p>Sự kiện nhấn mạnh nhu cầu tạo chuỗi kết nối ngắn, nhanh và có khả năng chuyển hóa thành cơ hội kinh doanh ngay sau chương trình.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-05",
title: "Bản tin nhanh: doanh nghiệp hội viên tăng tốc chuyển đổi số trong khâu bán hàng và chăm sóc khách hàng",
slug: "ban-tin-nhanh-doanh-nghiep-hoi-vien-tang-toc-chuyen-doi-so-trong-khau-ban-hang-va-cham-soc-khach-hang",
summary:
"<p>Nhiều mô hình ứng dụng CRM, dashboard và tự động hóa quy trình đang được chia sẻ tại chuỗi chuyên đề của VCCI News.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news"],
tagsearch_values: ["Chuyên Đề", "Chuyển đổi số"],
is_featured: true,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-05-11T07:45:00.000Z",
updated_at: "2026-05-11T13:15:00.000Z",
published_at: "2026-05-11T07:45",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Hệ thống trực tuyến",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-05-a",
type: "text",
position: 1,
content:
"<p>Xu hướng tập trung vào trải nghiệm khách hàng, đo lường hiệu quả vận hành và chuẩn hóa dữ liệu đang trở thành ưu tiên hàng đầu.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-06",
title: "Khởi động chuỗi đối thoại chính sách với doanh nghiệp và hiệp hội ngành hàng năm 2026",
slug: "khoi-dong-chuoi-doi-thoai-chinh-sach-voi-doanh-nghiep-va-hiep-hoi-nganh-hang-nam-2026",
summary:
"<p>Chuỗi đối thoại sẽ tập trung vào vướng mắc thủ tục, chi phí tuân thủ và các đề xuất cải thiện môi trường kinh doanh.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event", "cat-policy"],
tagsearch_values: ["Sự kiện", "Chính sách"],
is_featured: true,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2026-05-10T09:10:00.000Z",
updated_at: "2026-05-10T14:40:00.000Z",
published_at: "2026-05-10T09:10",
expired_at: "",
started_at: "2026-05-28T08:30",
ended_at: "2026-05-28T12:00",
registration_deadline: "2026-05-25T17:00",
location: "Hà Nội",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-06-a",
type: "text",
position: 1,
content:
"<p>Chương trình được thiết kế như một không gian lắng nghe phản hồi thực tiễn và tạo đầu mối điều phối cho các kiến nghị có trọng tâm.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-07",
title: "Cẩm nang thiết kế gian hàng triển lãm hiệu quả cho doanh nghiệp tham gia hội chợ quốc tế",
slug: "cam-nang-thiet-ke-gian-hang-trien-lam-hieu-qua-cho-doanh-nghiep-tham-gia-hoi-cho-quoc-te",
summary:
"<p>Nội dung tổng hợp những lưu ý về nhận diện thương hiệu, luồng trưng bày và cách tạo trải nghiệm ghi nhớ cho khách tham quan.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news", "cat-activity"],
tagsearch_values: ["Chuyên Đề", "Cẩm nang"],
is_featured: true,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-07T14:00:00.000Z",
updated_at: "2026-05-09T09:00:00.000Z",
published_at: "2026-05-07T14:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-07-a",
type: "text",
position: 1,
content:
"<p>Tài liệu hướng dẫn được biên tập để doanh nghiệp có thể ứng dụng ngay khi chuẩn bị tham gia các sự kiện giao thương trong nước và quốc tế.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-08",
title: "Hoa Kỳ muốn đẩy mạnh hợp tác kinh tế, thương mại bền vững với Việt Nam",
slug: "hoa-ky-muon-day-manh-hop-tac-kinh-te-thuong-mai-ben-vung-voi-viet-nam",
summary:
"<p>Chương trình làm việc tập trung vào hợp tác chuỗi cung ứng, tiêu chuẩn xanh và kết nối doanh nghiệp giữa các địa phương.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news"],
tagsearch_values: ["Tin VCCI", "Hợp tác quốc tế"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-03-27T09:00:00.000Z",
updated_at: "2026-03-27T11:00:00.000Z",
published_at: "2026-03-27T09:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-08-a",
type: "text",
position: 1,
content:
"<p>Đại diện hai bên nhấn mạnh nhu cầu phát triển bền vững và hỗ trợ cộng đồng doanh nghiệp thích ứng với thay đổi thị trường toàn cầu.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-09",
title: "Những điểm sáng trong bức tranh kinh tế, số liệu quý II và 6 tháng đầu năm 2026",
slug: "nhung-diem-sang-trong-buc-tranh-kinh-te-so-lieu-quy-ii-va-6-thang-dau-nam-2026",
summary:
"<p>Bản tin tổng hợp các tín hiệu phục hồi, tăng trưởng xuất khẩu và mức độ cải thiện niềm tin thị trường trong nhiều nhóm ngành.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news"],
tagsearch_values: ["Tin Kinh Tế", "Vĩ mô"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-03-25T08:30:00.000Z",
updated_at: "2026-03-25T10:00:00.000Z",
published_at: "2026-03-25T08:30",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Hà Nội",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-09-a",
type: "text",
position: 1,
content:
"<p>Dữ liệu cho thấy nhiều nhóm doanh nghiệp đang cải thiện năng lực đơn hàng và thích ứng tốt hơn với biến động chi phí.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-10",
title: "Tình hình kinh tế - vĩ mô Quý 1 năm 2026",
slug: "tinh-hinh-kinh-te-vi-mo-quy-1-nam-2026",
summary:
"<p>Báo cáo nhanh về tăng trưởng, lạm phát, lãi suất và xu hướng đầu tư trong bối cảnh kinh tế quốc tế còn nhiều thay đổi.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news"],
tagsearch_values: ["Tin Kinh Tế", "Vĩ mô"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2026-03-22T08:00:00.000Z",
updated_at: "2026-03-22T09:30:00.000Z",
published_at: "2026-03-22T08:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Hà Nội",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-10-a",
type: "text",
position: 1,
content:
"<p>Bản tin cung cấp góc nhìn cô đọng về những chỉ số ảnh hưởng trực tiếp đến hoạt động sản xuất, thương mại và đầu tư.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-11",
title: "Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam dành cho doanh nghiệp mới",
slug: "cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-danh-cho-doanh-nghiep-moi",
summary:
"<p>Tài liệu tổng hợp các bước chuẩn bị hồ sơ, lựa chọn địa điểm và những lưu ý pháp lý ban đầu cho nhà đầu tư và doanh nghiệp.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-news"],
tagsearch_values: ["Chuyên Đề", "Cẩm nang"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-03-20T07:30:00.000Z",
updated_at: "2026-03-20T09:00:00.000Z",
published_at: "2026-03-20T07:30",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Trực tuyến",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-11-a",
type: "text",
position: 1,
content:
"<p>Nội dung được biên tập theo hướng dễ áp dụng, giúp doanh nghiệp mới có thể tra cứu nhanh khi bắt đầu triển khai dự án.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-12",
title: "Khóa đào tạo: Quản trị Thuế và Pháp lý trong giao dịch",
slug: "khoa-dao-tao-quan-tri-thue-va-phap-ly-trong-giao-dich",
summary:
"<p>Chương trình cập nhật các điểm mới về quản trị thuế, hồ sơ giao dịch và kiểm soát rủi ro pháp lý trong doanh nghiệp.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Đào tạo", "Sự kiện"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-11-01T08:00:00.000Z",
updated_at: "2026-11-01T10:00:00.000Z",
published_at: "2026-11-01T08:00",
expired_at: "",
started_at: "2026-11-18T08:30",
ended_at: "2026-11-18T16:30",
registration_deadline: "2026-11-15T17:00",
location: "TP. Hồ Chí Minh",
participation_fee: "800.000 VNĐ",
post_content: [
{
id: "section-admin-news-12-a",
type: "text",
position: 1,
content:
"<p>Khóa học dành cho đội ngũ quản lý, kế toán trưởng và chuyên viên pháp chế cần chuẩn hóa quy trình nội bộ.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-13",
title: "Sự kiện - Tập huấn NSDLĐ",
slug: "su-kien-tap-huan-nsdld",
summary:
"<p>Buổi tập huấn hướng dẫn người sử dụng lao động cập nhật các quy định thực thi và quy trình phối hợp với bộ phận nhân sự.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Đào tạo", "Sự kiện"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-11-03T09:00:00.000Z",
updated_at: "2026-11-03T09:30:00.000Z",
published_at: "2026-11-03T09:00",
expired_at: "",
started_at: "2026-11-20T13:30",
ended_at: "2026-11-20T17:00",
registration_deadline: "2026-11-18T17:00",
location: "Hà Nội",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-13-a",
type: "text",
position: 1,
content:
"<p>Nội dung tập huấn tập trung vào các tình huống thường gặp trong quá trình vận hành chính sách nhân sự và lao động.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-14",
title: "Diễn đàn hội viên: Kết nối thị trường và chuỗi cung ứng",
slug: "dien-dan-hoi-vien-ket-noi-thi-truong-va-chuoi-cung-ung",
summary:
"<p>Diễn đàn tạo không gian gặp gỡ giữa doanh nghiệp sản xuất, đơn vị phân phối và nhà cung cấp dịch vụ hỗ trợ thị trường.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Sự kiện", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2026-11-05T08:30:00.000Z",
updated_at: "2026-11-05T11:00:00.000Z",
published_at: "2026-11-05T08:30",
expired_at: "",
started_at: "2026-11-24T08:00",
ended_at: "2026-11-24T12:00",
registration_deadline: "2026-11-22T17:00",
location: "Đà Nẵng",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-14-a",
type: "text",
position: 1,
content:
"<p>Chương trình hướng đến việc mở rộng cơ hội kết nối đối tác, chia sẻ nhu cầu thị trường và xây dựng chuỗi cung ứng linh hoạt hơn.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-15",
title: "Chương trình kết nối doanh nghiệp hội viên ngành thực phẩm và bán lẻ",
slug: "chuong-trinh-ket-noi-doanh-nghiep-hoi-vien-nganh-thuc-pham-va-ban-le",
summary:
"<p>Buổi kết nối tạo không gian giới thiệu sản phẩm, chia sẻ nhu cầu mua hàng và ghép nối đối tác giữa doanh nghiệp sản xuất với hệ thống phân phối.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Sự kiện", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-11T08:15:00.000Z",
updated_at: "2026-05-11T10:30:00.000Z",
published_at: "2026-05-11T08:15",
expired_at: "",
started_at: "2026-05-22T14:00",
ended_at: "2026-05-22T17:00",
registration_deadline: "2026-05-20T17:00",
location: "TP. Hồ Chí Minh",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-15-a",
type: "text",
position: 1,
content:
"<p>Chương trình ưu tiên các nhóm doanh nghiệp đang cần mở rộng hệ thống phân phối và tìm đối tác đồng hành tại khu vực phía Nam.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-16",
title: "Lớp đào tạo ngắn hạn: Kỹ năng xây dựng kế hoạch xúc tiến thương mại",
slug: "lop-dao-tao-ngan-han-ky-nang-xay-dung-ke-hoach-xuc-tien-thuong-mai",
summary:
"<p>Khóa học hướng dẫn doanh nghiệp xác định mục tiêu, ngân sách và cách triển khai hoạt động xúc tiến thương mại theo từng giai đoạn.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Đào tạo", "Sự kiện"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-05-12T07:45:00.000Z",
updated_at: "2026-05-12T09:20:00.000Z",
published_at: "2026-05-12T07:45",
expired_at: "",
started_at: "2026-05-26T08:30",
ended_at: "2026-05-26T11:30",
registration_deadline: "2026-05-24T17:00",
location: "Trực tuyến",
participation_fee: "350.000 VNĐ",
post_content: [
{
id: "section-admin-news-16-a",
type: "text",
position: 1,
content:
"<p>Nội dung tập trung vào cấu trúc kế hoạch, xây dựng đầu việc ưu tiên và lựa chọn kênh triển khai phù hợp với nguồn lực của doanh nghiệp.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-17",
title: "Công ty Western Coast Enterprise LTD cần thuê mua vật liệu xây dựng tại Việt Nam",
slug: "cong-ty-western-coast-enterprise-ltd-can-thue-mua-vat-lieu-xay-dung-tai-viet-nam",
summary:
"<p>Doanh nghiệp tìm kiếm đối tác cung ứng vật liệu xây dựng ổn định tại thị trường Việt Nam để phục vụ kế hoạch mở rộng chuỗi dự án trong khu vực.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-business-opportunity"],
tagsearch_values: ["Cơ hội kinh doanh", "Kết nối giao thương"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2025-11-12T08:00:00.000Z",
updated_at: "2025-11-12T09:30:00.000Z",
published_at: "2025-11-12T08:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "",
post_content: [
{
id: "section-admin-news-17-a",
type: "text",
position: 1,
content:
"<p>Nhu cầu tập trung vào nhóm vật liệu hoàn thiện, vật liệu nền móng và các nhà cung ứng có khả năng đáp ứng đơn hàng dài hạn.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-18",
title: "VCCI-HCM kết nối các nhà đầu tư nước ngoài với doanh nghiệp Việt trong chuỗi cung ứng công nghiệp",
slug: "vcci-hcm-ket-noi-cac-nha-dau-tu-nuoc-ngoai-voi-doanh-nghiep-viet-trong-chuoi-cung-ung-cong-nghiep",
summary:
"<p>Chương trình giới thiệu danh mục nhu cầu hợp tác, tìm nhà cung ứng linh kiện và đối tác gia công cho nhóm doanh nghiệp FDI.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-business-opportunity"],
tagsearch_values: ["Cơ hội kinh doanh", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2025-11-12T07:00:00.000Z",
updated_at: "2025-11-12T08:15:00.000Z",
published_at: "2025-11-12T07:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Bình Dương",
participation_fee: "",
post_content: [
{
id: "section-admin-news-18-a",
type: "text",
position: 1,
content:
"<p>Hoạt động ưu tiên những doanh nghiệp có năng lực sản xuất ổn định, minh bạch hồ sơ chất lượng và sẵn sàng tham gia đánh giá nhà máy.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-19",
title: "Doanh nghiệp logistics tìm đối tác phân phối và khai thác tuyến vận chuyển liên vùng",
slug: "doanh-nghiep-logistics-tim-doi-tac-phan-phoi-va-khai-thac-tuyen-van-chuyen-lien-vung",
summary:
"<p>Thông tin mời hợp tác dành cho các doanh nghiệp có hệ thống kho bãi, đội xe và năng lực xử lý đơn hàng tại khu vực phía Nam.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-business-opportunity"],
tagsearch_values: ["Cơ hội kinh doanh", "Logistics"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2025-11-11T10:30:00.000Z",
updated_at: "2025-11-11T11:00:00.000Z",
published_at: "2025-11-11T10:30",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Long An",
participation_fee: "",
post_content: [
{
id: "section-admin-news-19-a",
type: "text",
position: 1,
content:
"<p>Nội dung hợp tác bao gồm phân phối nội địa, gom hàng xuất khẩu và phát triển thêm các điểm trung chuyển mới tại khu vực lân cận.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-20",
title: "Những chính sách mới có hiệu lực từ ngày 01/10/2026",
slug: "nhung-chinh-sach-moi-co-hieu-luc-tu-ngay-01-10-2026",
summary:
"<p>Tổng hợp nhanh các quy định mới liên quan đến thuế, lao động và thủ tục hành chính mà doanh nghiệp cần lưu ý trong kỳ áp dụng mới.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-policy-law"],
tagsearch_values: ["Chính sách & pháp luật", "Chính sách"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2025-11-12T09:00:00.000Z",
updated_at: "2025-11-12T09:40:00.000Z",
published_at: "2025-11-12T09:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Hà Nội",
participation_fee: "",
post_content: [
{
id: "section-admin-news-20-a",
type: "text",
position: 1,
content:
"<p>Bài viết hệ thống lại các mốc áp dụng, nhóm đối tượng chịu tác động và một số đầu việc doanh nghiệp nên chuẩn bị sớm.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-21",
title: "Luật được sửa đổi: nhiều quy định mới có lợi cho doanh nghiệp",
slug: "luat-duoc-sua-doi-nhieu-quy-dinh-moi-co-loi-cho-doanh-nghiep",
summary:
"<p>Nội dung cập nhật tập trung vào các điểm sửa đổi về điều kiện kinh doanh, thủ tục hồ sơ và cơ chế hỗ trợ doanh nghiệp nhỏ và vừa.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-policy-law"],
tagsearch_values: ["Chính sách & pháp luật", "Pháp luật"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2025-11-12T08:30:00.000Z",
updated_at: "2025-11-12T09:00:00.000Z",
published_at: "2025-11-12T08:30",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Hà Nội",
participation_fee: "",
post_content: [
{
id: "section-admin-news-21-a",
type: "text",
position: 1,
content:
"<p>Các thay đổi đáng chú ý giúp rút ngắn thời gian xử lý thủ tục và mở rộng thêm một số cơ chế linh hoạt cho nhà đầu tư.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-22",
title: "Bảo vệ cổ đông: có được coi là sự kiện bất khả kháng đối với doanh nghiệp",
slug: "bao-ve-co-dong-co-duoc-coi-la-su-kien-bat-kha-khang-doi-voi-doanh-nghiep",
summary:
"<p>Phân tích tình huống pháp lý thường gặp trong quản trị doanh nghiệp, trách nhiệm công bố thông tin và cách xác định rủi ro phát sinh.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-policy-law"],
tagsearch_values: ["Chính sách & pháp luật", "Pháp luật"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2025-11-12T08:00:00.000Z",
updated_at: "2025-11-12T08:45:00.000Z",
published_at: "2025-11-12T08:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "",
post_content: [
{
id: "section-admin-news-22-a",
type: "text",
position: 1,
content:
"<p>Bài viết đưa ra góc nhìn thực tiễn và khuyến nghị bước chuẩn bị hồ sơ nội bộ khi phát sinh tranh chấp liên quan đến quyền cổ đông.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-23",
title: "Kết nối hội viên ngành xây dựng và vật liệu tại khu vực phía Nam",
slug: "ket-noi-hoi-vien-nganh-xay-dung-va-vat-lieu-tai-khu-vuc-phia-nam",
summary:
"<p>Hoạt động kết nối tập trung vào nhóm doanh nghiệp sản xuất vật liệu, thi công công trình và đơn vị tư vấn đang cần mở rộng mạng lưới hợp tác.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-member-connection"],
tagsearch_values: ["Kết nối hội viên", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-13T08:00:00.000Z",
updated_at: "2026-05-13T08:30:00.000Z",
published_at: "2026-05-13T08:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "",
post_content: [
{
id: "section-admin-news-23-a",
type: "text",
position: 1,
content:
"<p>Chương trình giới thiệu nhu cầu hợp tác, nhu cầu nhà cung ứng và các cơ hội triển khai dự án chung trong giai đoạn tới.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-24",
title: "Không gian gặp gỡ hội viên mới trong mạng lưới doanh nghiệp dịch vụ",
slug: "khong-gian-gap-go-hoi-vien-moi-trong-mang-luoi-doanh-nghiep-dich-vu",
summary:
"<p>Buổi networking quy tụ đại diện doanh nghiệp dịch vụ, thương mại và đơn vị tư vấn cùng chia sẻ nhu cầu kết nối khách hàng.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-member-connection"],
tagsearch_values: ["Kết nối hội viên", "Networking"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2026-05-12T15:00:00.000Z",
updated_at: "2026-05-12T16:15:00.000Z",
published_at: "2026-05-12T15:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "TP. Hồ Chí Minh",
participation_fee: "",
post_content: [
{
id: "section-admin-news-24-a",
type: "text",
position: 1,
content:
"<p>Nội dung chú trọng vào việc tạo điểm chạm ban đầu giữa các hội viên mới với cộng đồng doanh nghiệp hiện có của VCCI-HCM.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-25",
title: "Chương trình chia sẻ cơ hội hợp tác giữa hội viên công nghệ và doanh nghiệp truyền thống",
slug: "chuong-trinh-chia-se-co-hoi-hop-tac-giua-hoi-vien-cong-nghe-va-doanh-nghiep-truyen-thong",
summary:
"<p>Chuỗi hoạt động giúp doanh nghiệp công nghệ giới thiệu giải pháp số và tìm đối tác ứng dụng trong sản xuất, thương mại và dịch vụ.</p>",
type: "tintuc",
header_category_id: "activity-news",
category_ids: ["cat-member-connection"],
tagsearch_values: ["Kết nối hội viên", "Chuyển đổi số"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-05-11T16:00:00.000Z",
updated_at: "2026-05-11T17:00:00.000Z",
published_at: "2026-05-11T16:00",
expired_at: "",
started_at: "",
ended_at: "",
registration_deadline: "",
location: "Trực tuyến",
participation_fee: "",
post_content: [
{
id: "section-admin-news-25-a",
type: "text",
position: 1,
content:
"<p>Chương trình mở ra nhiều phiên giới thiệu nhanh, matching nhu cầu và trao đổi mô hình triển khai phù hợp theo từng nhóm ngành.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-26",
title: "Phiên kết nối nhà mua hàng quốc tế với doanh nghiệp hội viên ngành gỗ",
slug: "phien-ket-noi-nha-mua-hang-quoc-te-voi-doanh-nghiep-hoi-vien-nganh-go",
summary:
"<p>Chương trình tập trung vào nhu cầu sourcing sản phẩm nội thất, vật liệu hoàn thiện và nhóm doanh nghiệp có năng lực xuất khẩu tại khu vực phía Nam.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Sự kiện", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-13T09:00:00.000Z",
updated_at: "2026-05-13T10:15:00.000Z",
published_at: "2026-05-13T09:00",
expired_at: "",
started_at: "2026-05-29T08:30",
ended_at: "2026-05-29T11:30",
registration_deadline: "2026-05-27T17:00",
location: "TP. Hồ Chí Minh",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-26-a",
type: "text",
position: 1,
content:
"<p>Hoạt động ưu tiên các doanh nghiệp có bộ hồ sơ năng lực xuất khẩu rõ ràng và sản phẩm phù hợp với nhóm nhà mua hàng đang mở rộng nguồn cung tại Việt Nam.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-27",
title: "Hội thảo chuyên đề logistics lạnh cho doanh nghiệp thực phẩm và nông sản",
slug: "hoi-thao-chuyen-de-logistics-lanh-cho-doanh-nghiep-thuc-pham-va-nong-san",
summary:
"<p>Chuỗi chia sẻ cập nhật xu hướng bảo quản lạnh, tối ưu chi phí vận chuyển và tiêu chuẩn chất lượng trong chuỗi cung ứng thực phẩm.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Sự kiện", "Chuyên đề"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[0]),
is_hidden: false,
created_at: "2026-05-14T07:45:00.000Z",
updated_at: "2026-05-14T08:20:00.000Z",
published_at: "2026-05-14T07:45",
expired_at: "",
started_at: "2026-05-30T13:30",
ended_at: "2026-05-30T16:30",
registration_deadline: "2026-05-28T17:00",
location: "Cần Thơ",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-27-a",
type: "text",
position: 1,
content:
"<p>Phiên thảo luận kết nối doanh nghiệp sản xuất với đơn vị kho vận, chuỗi bán lẻ và nhà cung cấp giải pháp kiểm soát nhiệt độ trong bảo quản.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-28",
title: "Khóa đào tạo thực hành xây dựng hồ sơ năng lực số cho doanh nghiệp hội viên",
slug: "khoa-dao-tao-thuc-hanh-xay-dung-ho-so-nang-luc-so-cho-doanh-nghiep-hoi-vien",
summary:
"<p>Khóa học hướng dẫn doanh nghiệp chuẩn hóa profile giới thiệu, tài liệu bán hàng và công cụ trình bày năng lực trên môi trường số.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Đào tạo", "Hội viên"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[3]),
is_hidden: false,
created_at: "2026-05-14T10:10:00.000Z",
updated_at: "2026-05-14T10:50:00.000Z",
published_at: "2026-05-14T10:10",
expired_at: "",
started_at: "2026-06-03T08:30",
ended_at: "2026-06-03T11:30",
registration_deadline: "2026-06-01T17:00",
location: "Trực tuyến",
participation_fee: "300.000 VNĐ",
post_content: [
{
id: "section-admin-news-28-a",
type: "text",
position: 1,
content:
"<p>Nội dung tập trung vào các phần cốt lõi của bộ hồ sơ giới thiệu doanh nghiệp, hình ảnh minh họa và cách trình bày thông tin súc tích để chào đối tác.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
{
id: "admin-news-29",
title: "Diễn đàn kết nối tài chính xanh cho doanh nghiệp sản xuất và xuất khẩu",
slug: "dien-dan-ket-noi-tai-chinh-xanh-cho-doanh-nghiep-san-xuat-va-xuat-khau",
summary:
"<p>Chương trình cập nhật các nguồn vốn xanh, tiêu chí đánh giá dự án và giải pháp chuẩn bị hồ sơ tiếp cận tài chính cho doanh nghiệp.</p>",
type: "tintuc",
header_category_id: "activity-events",
category_ids: ["cat-event"],
tagsearch_values: ["Sự kiện", "Tài chính xanh"],
is_featured: false,
thumbnail: toImageRef(mediaSeed[2]),
is_hidden: false,
created_at: "2026-05-14T11:20:00.000Z",
updated_at: "2026-05-14T12:00:00.000Z",
published_at: "2026-05-14T11:20",
expired_at: "",
started_at: "2026-06-05T14:00",
ended_at: "2026-06-05T17:00",
registration_deadline: "2026-06-03T17:00",
location: "Hà Nội",
participation_fee: "Miễn phí",
post_content: [
{
id: "section-admin-news-29-a",
type: "text",
position: 1,
content:
"<p>Diễn đàn tạo nhịp kết nối giữa doanh nghiệp, ngân hàng và đơn vị tư vấn để trao đổi về điều kiện tiếp cận các chương trình tài chính xanh.</p>",
image_columns: 2,
image_rows: 2,
images: [],
},
],
},
]; ];
export function slugifyAdminNews(value: string) { export function slugifyAdminNews(value: string) {
......
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