Skip to content

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

refactor(ui home)/convert to components style

parent 5433c2d5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 834 additions and 632 deletions
src/app/(main)/(home)/components/banner/index.tsx 0 → 100644
View file @ 7337279f
'use client';
import ImageNext from "@/components/shared/image-next";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import { Swiper as SwiperType } from "swiper/types";
import { useRef } from "react";
const Banner = () => {
const swiperRef = useRef<SwiperType | null>(null);
return (
<Swiper
modules={[Autoplay]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
slidesPerView={1}
onSwiper={(s) => (swiperRef.current = s)}
>
<SwiperSlide>
<ImageNext
src="https://vcci-hcm.org.vn/wp-content/uploads/2025/10/1.1.-Hero-Banner-CEO-2025-Bi-Sai-Nam-2025-Nhe-2560x720-Px.jpg.webp"
alt="Banner"
width={2560}
height={720}
sizes="100vw"
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/>
</SwiperSlide>
<SwiperSlide>
<ImageNext
src="https://vcci-hcm.org.vn/wp-content/uploads/2022/07/Landscape-HCM_3-01.png"
alt="Banner"
width={2560}
height={720}
sizes="100vw"
className="w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[500px] object-cover"
/>
</SwiperSlide>
</Swiper>
);
}
export default Banner;
\ No newline at end of file
src/app/(main)/(home)/components/business-opportunities/index.tsx 0 → 100644
View file @ 7337279f
import { useGetNews } from "@/api/endpoints/news";
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next";
import { Spinner } from "@/components/ui/spinner";
import { ChevronsRight } from "lucide-react";
import Link from "next/link";
import BASE_URL from "@/links/index";
import CardNews from "./components/card-news";
const businessOpportunities = () => {
const { data, isLoading } = useGetNews<GetNewsResponseType>(
{
pageSize: '5',
filters: `page_config.code @=co-hoi-kinh-doanh`,
}
);
return (
<div className="flex-1">
<div className="flex justify-between items-center">
<Link
href="/xuc-tien-thuong-mai/co-hoi/"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]"
>
Cơ hội kinh doanh
</Link>
<Link
href="/xuc-tien-thuong-mai/co-hoi/"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#063e8e] mb-4" />
<div className="pt-2">
{isLoading ? (
<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>
</Link>
))}
{data?.responseData.rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
))}
</>
)}
</div>
</div>
);
};
export default businessOpportunities;
src/app/(main)/(home)/components/events-calendar/index.tsx 0 → 100644
View file @ 7337279f
import EventCalendar from "@/components/base/event-calendar"
import { ChevronsRight } from "lucide-react"
import Link from "next/link"
const EventsCalendar = () => {
return (
<div className="bg-[#063e8e] w-full lg:w-[30%] p-5">
<aside>
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Lịch sự kiện
</h2>
<Link
href="/hoat-dong/su-kien"
className="text-[#e8c518] hover:underline text-sm sm:text-base"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#e8c518] mb-4" />
<EventCalendar />
</aside>
</div>
)
}
export default EventsCalendar
\ No newline at end of file
src/app/(main)/(home)/components/events/index.tsx 0 → 100644
View file @ 7337279f
import { useGetEvents } from "@/api/endpoints/event";
import { EventApiResponse, EventItem } from "@/api/types/event";
import ImageNext from "@/components/shared/image-next";
import { Spinner } from "@/components/ui/spinner";
import { ChevronsRight } from "lucide-react"
import Link from "next/link"
import BASE_URL from "@/links/index";
import CardEvent from "./components/card-event";
import stripImagesAndHtml from "@/helpers/stripImageAndHtml";
import dayjs from "dayjs";
function Events() {
const { data, isLoading } = useGetEvents<EventApiResponse>();
return (
<div className="flex-1 bg-[#063e8e] p-5">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-bold uppercase text-[#e8c518]">
Sự kiện sắp diễn ra
</h2>
<Link href="/hoat-dong/su-kien" className="text-[#e8c518] text-sm sm:text-base">
<ChevronsRight />
</Link>
</div>
<hr className="border-[#e8c518] mb-4" />
<div className="flex flex-col md:flex-row gap-5">
{isLoading ? (
<div className="container w-full h-[80vh] flex justify-center items-center">
<Spinner />
</div>
) : (
<>
{data?.responseData.rows.slice(0, 1).map((event: EventItem) => (
<Link
key={event.id}
href={`hoat-dong/su-kien/${event.id}`}
className="flex flex-col w-full md:w-1/2 min-h-[180px] sm:min-h-[220px] gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3"
>
<div className="w-full aspect-3/2 overflow-hidden">
<ImageNext
src={`${BASE_URL.imageEndpoint}${event.image}`}
alt={event.name}
width={600}
height={400}
sizes="(max-width:768px) 100vw,50vw"
className="w-full h-full object-cover"
/>
</div>
<div className="flex-1">
<p className="text-[#0056b3] font-bold text-xl line-clamp-2">
{event.name}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(event.start_time).format("DD/MM/YYYY")}
</p>
<p className="line-clamp-3 text-justify">{stripImagesAndHtml(event.description)}</p>
</div>
</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>
)
}
export default Events
\ No newline at end of file
src/app/(main)/(home)/components/featured-news/index.tsx 0 → 100644
View file @ 7337279f
'use client';
import { useGetNews } from "@/api/endpoints/news";
import { GetNewsResponseType } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Grid } from "swiper/modules";
import BASE_URL from "@/links/index";
function FeaturedNews() {
const { data } = useGetNews<GetNewsResponseType>(
{
pageSize: '10',
}
);
return (
<section>
<div className="flex items-center justify-center py-8 px-4">
<div className="flex items-center w-full max-w-4xl">
<div className="flex-1 h-px bg-linear-to-r from-transparent via-gray-300 to-gray-400"></div>
<h1 className="px-6 text-[20px] sm:text-[24px] md:text-[28px] uppercase font-bold text-[#063e8e] whitespace-nowrap">
Tin Nổi Bật
</h1>
<div className="flex-1 h-px bg-linear-to-l from-transparent via-gray-300 to-gray-400"></div>
</div>
</div>
<Swiper
modules={[Autoplay]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
breakpoints={{
0: { slidesPerView: 1.1, spaceBetween: 10 },
640: { slidesPerView: 2, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
className="pb-5"
>
{data?.responseData?.rows.map((news) => (
<SwiperSlide key={news.id}>
<Link
href={`${news.external_link}`}
className="relative block bg-white shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
>
<ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
width={600}
height={400}
sizes="(max-width:640px) 100vw,(max-width:1024px) 50vw,33vw"
className="w-full aspect-3/2 sm:h-56 md:h-64 object-cover"
/>
<div className="absolute bottom-0 left-0 right-0 h-20 md:h-24 bg-linear-to-t from-black/80 to-transparent flex items-center justify-center p-3">
<p className="text-white text-center font-semibold line-clamp-2 text-sm sm:text-base leading-snug">
{news.title}
</p>
</div>
</Link>
</SwiperSlide>
))}
</Swiper>
</section>
);
}
export default FeaturedNews;
src/app/(main)/(home)/components/members/index.tsx 0 → 100644
View file @ 7337279f
import ImageNext from "@/components/shared/image-next";
import memberImages from "@/constants/memberImages";
import partnerImages from "@/constants/partnerImages";
import { ChevronsRight } from "lucide-react";
import Link from "next/link";
import { Autoplay, Grid } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/grid";
const Members = () => {
return (
<section className="flex flex-col lg:flex-row gap-5 pb-10 mb-0">
{/* LEFT: HỘI VIÊN TIÊU BIỂU */}
<aside className="w-full lg:w-1/3 flex-1 bg-[#e8c518] p-5">
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Hội viên tiêu biểu
</h2>
<Link
href="/danh-ba-hoi-vien"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#063e8e] mb-5" />
<Swiper
modules={[Autoplay]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
slidesPerView={3}
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) => (
<SwiperSlide key={i}>
<div className="flex justify-center items-center bg-white rounded-lg shadow p-3">
<ImageNext
src={src}
alt={`member-${i}`}
width={160}
height={160}
sizes="(max-width:640px) 25vw,(max-width:1024px) 15vw,10vw"
className="object-contain w-full h-full"
/>
</div>
</SwiperSlide>
))}
</Swiper>
</aside>
{/* RIGHT: KẾT NỐI HỘI VIÊN */}
<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
</h2>
</div>
<hr className="border-[#063e8e] mb-5" />
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: "row" }}
slidesPerView={3}
spaceBetween={16}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
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-[100px] h-[100px]">
<ImageNext
src={src}
alt={`partner-${i}`}
width={100}
height={100}
className="object-contain w-full h-full"
/>
</div>
</SwiperSlide>
))}
</Swiper>
</aside>
</section>
);
};
export default Members;
src/app/(main)/(home)/components/news/components/card-news/index.tsx 0 → 100644
View file @ 7337279f
import { NewsItem } from "@/api/types/news";
import BASE_URL from "@/links";
import dayjs from "dayjs";
import AppEditorContent from "@/components/shared/editor-content";
import Link from "next/link";
import ImageNext from "@/components/shared/image-next";
function CardNews({ news }: { news: NewsItem }) {
return (
<Link
href={`${news.external_link}`}
className="flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3"
>
<ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="aspect-3/2 object-cover"
width={130}
height={86}
/>
<div className="flex-1">
<p className="text-[#363636] font-bold text-sm line-clamp-2">
{news.title}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(news.release_at).format("DD/MM/YYYY")}
</p>
{/* <AppEditorContent className='line-clamp-2' value={news.description} /> */}
</div>
</Link>
);
}
export default CardNews;
src/app/(main)/(home)/components/news/index.tsx 0 → 100644
View file @ 7337279f
import { useGetNews } from "@/api/endpoints/news";
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
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 CardNews from "./components/card-news";
const News = () => {
const [tab, setTab] = useState("all");
const { data: newsSpecial } = useGetNews<GetNewsResponseType>({ pageSize: '1' });
const { data: newsFilters } = useGetNews<GetNewsResponseType>(
{
pageSize: '5',
filters: tab === "all" ? `` : `page_config.code @=${tab}`,
}
);
return (
<div className="flex-1">
<div className="flex justify-between items-center">
<Link
href="/thong-tin-truyen-thong/tin-vcci/"
className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]"
>
Tin tức
</Link>
<Link
href="/thong-tin-truyen-thong/tin-vcci/"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#063e8e] mb-4" />
<div className="flex flex-col md:flex-row gap-5">
{newsSpecial?.responseData.rows
.slice(0, 1)
.map((news: NewsItem) => (
<Link
key={news.id}
href={`${news.external_link}`}
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">
<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>
<div className="flex-1 p-5 pt-1">
<p className="text-[#063E8E] font-bold pb-2 text-xl line-clamp-2">
{news.title}
</p>
<p className="line-clamp-4 text-justify">{stripImagesAndHtml(news.description)}</p>
</div>
</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>
{newsFilters?.responseData?.rows.slice(0, 4).map((news) => (
<CardNews key={news.id} news={news} />
))}
</div>
</div>
</div>
);
}
export default News;
src/app/(main)/(home)/components/policies-and-laws/card-news/index.tsx 0 → 100644
View file @ 7337279f
import { NewsItem } from "@/api/types/news";
import BASE_URL from "@/links";
import dayjs from "dayjs";
import Link from "next/link";
import ImageNext from "@/components/shared/image-next";
function CardNews({ news }: { news: NewsItem }) {
return (
<Link
href={`${news.external_link}`}
className="flex flex-row gap-2 mb-2 sm:gap-3 sm:mb-3"
>
<ImageNext
src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
alt={news.title}
className="aspect-3/2 object-cover"
width={130}
height={86}
/>
<div className="flex-1">
<p className="text-[#363636] font-bold text-sm line-clamp-2">
{news.title}
</p>
<p className="text-gray-500 text-sm my-1">
{dayjs(news.release_at).format("DD/MM/YYYY")}
</p>
{/* <AppEditorContent className='line-clamp-2' value={news.description} /> */}
</div>
</Link>
);
}
export default CardNews;
src/app/(main)/(home)/components/policies-and-laws/index.tsx 0 → 100644
View file @ 7337279f
import { useGetNews } from "@/api/endpoints/news";
import { GetNewsResponseType, NewsItem } from "@/api/types/news";
import ImageNext from "@/components/shared/image-next";
import { Spinner } from "@/components/ui/spinner";
import { ChevronsRight } from "lucide-react";
import Link from "next/link";
import BASE_URL from "@/links/index";
import CardNews from "./card-news";
const PolicyAndLaws = () => {
const { data, isLoading } = useGetNews<GetNewsResponseType>(
{
pageSize: '5',
filters: `page_config.code @=phap-luat`,
}
);
return (
<div className="flex-1">
<div className="flex justify-between items-center">
<Link
href="/thong-tin-truyen-thong/phap-luat"
className="text-[18px] sm:text-[20px] font-bold uppercase text-[#063e8e]"
>
Chính sách & pháp luật
</Link>
<Link
href="/thong-tin-truyen-thong/phap-luat"
className="text-[#063e8e] text-sm sm:text-base"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#063e8e] mb-4" />
<div className="pt-2">
{isLoading ? (
<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>
</Link>
))}
{data?.responseData.rows.slice(0, 3).map((news) => (
<CardNews key={news.id} news={news} />
))}
</>
)}
</div>
</div>
);
}
export default PolicyAndLaws;
\ No newline at end of file
src/app/(main)/(home)/components/quick-links/index.tsx 0 → 100644
View file @ 7337279f
import ImageNext from "@/components/shared/image-next";
import Link from "next/link";
function QuickLinks() {
return (
<aside className="w-full lg:w-[30%]">
<div className="flex justify-between items-center">
<h2 className="text-[18px] sm:text-[20px] font-semibold uppercase text-[#063e8e]">
Liên kết nhanh
</h2>
</div>
<hr className="border-[#063e8e] mb-4" />
<div className="space-y-2 text-[#063e8e] text-sm md:text-base pb-10">
<div>
<Link
className="text-[#363636]"
href="https://vcci-hcm.org.vn/lien-ket-nhanh/cam-nang-huong-dan-dau-tu-kinh-doanh-tai-viet-nam-2023/"
>
🔗 Cẩm nang hướng dẫn đầu tư kinh doanh tại Việt Nam
</Link>
</div>
<div>
<Link
className="text-[#363636]"
href="https://vcci-hcm.org.vn/lien-ket-nhanh/doanh-nghiep-kien-nghi-ve-chinh-sach-va-phap-luat/"
>
🔗 Doanh nghiệp kiến nghị về chính sách và pháp luật
</Link>
</div>
</div>
<div>
<Link href="https://hardwaretools.com.vn/">
<ImageNext
src="/home/20-2048x1365.webp"
alt="banner"
width={2048}
height={1365}
/>
</Link>
</div>
</aside>
);
}
export default QuickLinks;
src/app/(main)/(home)/components/video-and-patners/index.tsx 0 → 100644
View file @ 7337279f
import ImageNext from "@/components/shared/image-next";
import partnerImages from "@/constants/partnerImages";
import { ChevronsRight } from "lucide-react";
import Link from "next/link";
import { Autoplay, Grid } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/grid";
const VideoAndPartners = () => {
return (
<section className="flex flex-col lg:flex-row gap-5 pb-10">
{/* LEFT: VIDEO */}
<div className="flex flex-col flex-1">
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-[#063e8e]">Video</h2>
<Link
href="/video"
className="text-[#063e8e] hover:underline text-sm font-medium"
>
<ChevronsRight />
</Link>
</div>
<hr className="border-[#063e8e] mb-5" />
<div className="flex flex-col md:flex-row gap-4 md:gap-6">
{[
{
src: "https://www.youtube.com/embed/J0Iz0iGuAXY",
title: "VCCI-HCM 2024 IN REVIEW (ENGLISH VERSION)",
},
{
src: "https://www.youtube.com/embed/_OnnGWv2ehM",
title: "Hội nghị Hội viên VCCI - Gala Mừng Xuân Ất Tỵ 2025",
},
].map((video, i) => (
<div key={i} className="w-full md:w-1/2">
<div className="aspect-video rounded-lg overflow-hidden shadow">
<iframe
className="w-full h-full font-bold"
src={video.src}
title={video.title}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>
</div>
<p className="mt-2 text-sm text-gray-700 font-medium">
{video.title}
</p>
</div>
))}
</div>
</div>
{/* RIGHT: ĐỐI TÁC */}
<aside className="w-full lg:w-[30%]">
<div className="flex justify-between items-center mb-3">
<h2 className="text-xl font-bold uppercase text-[#063e8e]">
Đối tác
</h2>
</div>
<hr className="border-[#063e8e] mb-5" />
<div className="pb-10">
<Swiper
modules={[Autoplay, Grid]}
autoplay={{ delay: 4000, disableOnInteraction: false }}
loop
grid={{ rows: 2, fill: "row" }}
slidesPerView={3}
spaceBetween={16}
breakpoints={{
0: { slidesPerView: 2, spaceBetween: 10 },
640: { slidesPerView: 3, spaceBetween: 16 },
1024: { slidesPerView: 3, spaceBetween: 24 },
}}
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-[100px] h-[100px]">
<ImageNext
src={src}
alt={`partner-${i}`}
width={100}
height={100}
className="object-contain w-full h-full"
/>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</aside>
</section>
);
};
export default VideoAndPartners;
src/app/(main)/(home)/page.tsx
View file @ 7337279f
This diff is collapsed.
src/app/(main)/_lib/layout/ScrollToTopButton.tsx
View file @ 7337279f
...@@ -21,7 +21,7 @@ export default function ScrollToTopButton() { ...@@ -21,7 +21,7 @@ export default function ScrollToTopButton() {
return ( return (
<button <button
onClick={scrollToTop} onClick={scrollToTop}
className={`fixed z-50 bottom-20 right-8 bg-[#e8c518] hover:text-[#063e8e] text-white p-3 rounded-lg shadow-lg transition-all duration-500 cursor-pointer ${visible className={`fixed z-50 bottom-15 right-8 bg-[#e8c518] hover:text-[#063e8e] text-white p-3 rounded-lg shadow-lg transition-all duration-500 cursor-pointer ${visible
? "opacity-100 translate-y-0" ? "opacity-100 translate-y-0"
: "opacity-0 translate-y-3 pointer-events-none" : "opacity-0 translate-y-3 pointer-events-none"
}`} }`}
......
src/app/(main)/_lib/layout/footer.tsx
View file @ 7337279f
...@@ -12,7 +12,7 @@ import { ...@@ -12,7 +12,7 @@ import {
Youtube, Youtube,
} from "lucide-react"; } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import vietnamMap from "@/assets/vietnam-map-white.png.webp"; import vietnamMap from "@/assets/vietnam-map-white.png";
function Footer() { function Footer() {
const emailRef = useRef<HTMLInputElement>(null); const emailRef = useRef<HTMLInputElement>(null);
...@@ -42,13 +42,13 @@ function Footer() { ...@@ -42,13 +42,13 @@ function Footer() {
<div className="flex gap-2 items-center w-full"> <div className="flex gap-2 items-center w-full">
<input <input
ref={emailRef} ref={emailRef}
className="h-12 flex-1 px-3 outline-hidden bg-white rounded-md text-[14px] w-full" className="h-12 flex-1 px-3 outline-hidden bg-white rounded-sm text-[14px] w-full"
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-md text-[#063e8e]" className="group w-14 h-12 flex items-center justify-center cursor-pointer bg-white rounded-sm text-[#063e8e]"
> >
<Mail size={20} className="group-hover:hidden" /> <Mail size={20} className="group-hover:hidden" />
<MailCheck size={20} className="group-hover:block hidden" /> <MailCheck size={20} className="group-hover:block hidden" />
......
src/app/(main)/_lib/layout/header.tsx
View file @ 7337279f
...@@ -20,9 +20,9 @@ function Header() { ...@@ -20,9 +20,9 @@ function Header() {
<div className="sticky top-0 w-full h-14 hidden lg:flex items-center justify-center bg-[#063e8e]"> <div className="sticky top-0 w-full h-14 hidden lg:flex items-center justify-center bg-[#063e8e]">
<div className="container w-full px-4 flex items-center justify-between"> <div className="container w-full px-4 flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-[130px] h-9 bg-[#e8c518] flex items-center justify-center border-4 rounded-sm border-[#647792]"> <div className="w-35 h-9 bg-[#e8c518] flex items-center justify-center border-3 rounded-sm border-[#647792]">
<Link <Link
className="font-semibold text-[14px] text-primary hover:text-white transition" className="font-bold text-[14px] text-primary hover:text-white transition"
href="https://vccihcm.vn/dang-ky" href="https://vccihcm.vn/dang-ky"
> >
Đăng Ký Hội Viên Đăng Ký Hội Viên
...@@ -44,7 +44,7 @@ function Header() { ...@@ -44,7 +44,7 @@ function Header() {
<div className="flex items-center gap-8"> <div className="flex items-center gap-8">
<input <input
className="bg-white h-12 rounded-sm outline-none px-4 w-64 placeholder:text-sm" className="bg-white h-10 rounded-sm outline-none px-4 w-64 placeholder:text-sm"
type="text" type="text"
placeholder="Tìm kiếm" placeholder="Tìm kiếm"
onKeyDown={(e) => { onKeyDown={(e) => {
...@@ -90,7 +90,7 @@ function Header() { ...@@ -90,7 +90,7 @@ function Header() {
</div> </div>
</div> </div>
<div className="sticky top-0 z-50 bg-[#ededed] shadow-md py-4"> <div className="sticky top-0 z-50 bg-[#ededed] shadow-md py-2">
<div className="container m-auto"> <div className="container m-auto">
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
{/* Logo */} {/* Logo */}
...@@ -98,7 +98,7 @@ function Header() { ...@@ -98,7 +98,7 @@ function Header() {
<Image <Image
className="w-[140px] object-contain" className="w-[140px] object-contain"
src={logo} src={logo}
alt="VCCI HCM" alt="VCCI-HCM"
/> />
</Link> </Link>
......
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