Skip to content

V
VCCI-News
Commit 4de59c4b authored by Văn Hoàng's avatar Văn Hoàng
Browse files
Options

Merge branch 'fix/responsive' into 'develop' 

Fix/responsive

See merge request !40
parents b53461dd 01624b19
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 127 deletions
src/app/(main)/[...slug]/templates/EventDetailPage.tsx
View file @ 4de59c4b
......@@ -43,14 +43,14 @@ export default function EventDetailPage() {
<div className='flex flex-col gap-5 w-full'>
<ListCategory categories={categoriesPage?.responseData?.children} />
<div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
<main className="lg:col-span-2 bg-white border rounded-md p-8">
<main className="lg:col-span-2 bg-white border rounded-md py-10 px-5 md:px-20">
<div className='pb-5 text-primary text-2xl leading-normal font-medium'>
{eventsDetail?.responseData?.rows[0]?.name}
</div>
<hr className="py-2" />
{/* Top summary with image + details */}
<div className="flex flex-col lg:flex-row gap-6 my-6">
<div className="flex flex-col md:flex-row gap-6 my-6">
<div className="w-full lg:w-1/2 bg-gray-50 rounded-md overflow-hidden">
{eventsDetail?.responseData?.rows[0].image ? (
<div className="w-full h-52 relative ">
......@@ -64,7 +64,7 @@ export default function EventDetailPage() {
)}
</div>
<div className="w-full lg:w-1/2 bg-white border rounded-md p-6">
<div className="w-full lg:w-1/2 bg-white border rounded-md p-3 md:p-6">
<div className="flex flex-col gap-3">
<div className="text-sm text-gray-500 flex flex-row items-center gap-2">
<Clock className="h-5 w-5 text-yellow-500" />
......@@ -109,7 +109,7 @@ export default function EventDetailPage() {
</div>
{/* Full description */}
<div className="p-7.5 prose tiptap overflow-hidden">
<div className="prose tiptap overflow-hidden">
{parse(eventsDetail?.responseData?.rows[0]?.description ?? "")}
</div>
</main>
......
src/app/(main)/[...slug]/templates/InformationPage.tsx
View file @ 4de59c4b
......@@ -35,7 +35,7 @@ export default function InformationPage() {
) : (
<div className='flex flex-col gap-5 w-full'>
<ListCategory categories={category?.responseData?.children} />
<main className=" bg-white border rounded-md py-10 px-30">
<main className=" bg-white border rounded-md py-10 px-5 md:px-20 lg:px-20">
<div className='text-primary text-2xl leading-normal font-bold'>
{data?.responseData?.rows[0]?.title}
</div>
......
src/app/(main)/_lib/layout/footer.tsx
View file @ 4de59c4b
"use client";
import React, { ReactNode, useRef, useState } from "react";
import React, { useRef, useState } from "react";
import {
Facebook,
Linkedin,
......@@ -21,51 +21,47 @@ function Footer() {
const [chechError, setCheckError] = useState(false);
const handleSubmit = () => {
if (!checkBoxRef.current?.checked) {
setCheckError(true);
} else {
setCheckError(false);
}
if (emailRef.current?.value === "") {
setEmailError(true);
} else {
setEmailError(false);
}
if (!checkBoxRef.current?.checked) setCheckError(true);
else setCheckError(false);
if (emailRef.current?.value === "") setEmailError(true);
else setEmailError(false);
};
return (
<div className="overflow-hidden">
<div className="p-5 bg-[#e3e3e3]">
<div className="container w-full flex m-auto flex-wrap relative">
<div className="z-10 w-full lg:w-1/3 flex flex-col gap-5 p-5">
<h2 className="text-[#063E8E] text-[20px] font-[500]">
<div className="overflow-hidden w-full">
<div className="py-5 xl:p-5 bg-[#e3e3e3]">
<div className="container w-full flex flex-col lg:flex-row m-auto lg:flex-nowrap flex-wrap relative gap-10">
<div className="z-10 w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5">
<h2 className="text-[#063E8E] text-[20px] font-bold text-left">
ĐĂNG KÝ NHẬN THÔNG TIN VCCI
</h2>
<div className="h-[1px] w-15 bg-[#063e8e]"></div>
<div className="h-0.5 w-14 bg-[#063e8e] mx-0"></div>
<div className="flex flex-col gap-2">
<div className="flex gap-2 items-center">
<div className="flex gap-2 items-center w-full">
<input
ref={emailRef}
className="h-13 px-3 outline-hidden bg-white"
className="h-12 flex-1 px-3 outline-hidden bg-white rounded-md text-[14px] w-full"
type="email"
placeholder="Nhập email của bạn"
/>
<div
<button
onClick={handleSubmit}
className="group w-25 h-13 flex items-center justify-center cursor-pointer bg-white text-[#063e8e]"
className="group w-14 h-12 flex items-center justify-center cursor-pointer bg-white rounded-md text-[#063e8e]"
>
<Mail size={23} className="group-hover:hidden" />
<MailCheck size={23} className="group-hover:block hidden" />
</div>
<Mail size={20} className="group-hover:hidden" />
<MailCheck size={20} className="group-hover:block hidden" />
</button>
</div>
{emailError && (
<p className="text-[#F56C6C] text-[12px]">Thông tin bắt buộc</p>
<p className="text-[#F56C6C] text-[12px]">
Thông tin bắt buộc
</p>
)}
<div className="flex items-center gap-2">
<input ref={checkBoxRef} type="checkbox" id="check" />
<label
className="text-[14px] font-[400] text-[#636363]"
htmlFor="check"
>
<label className="text-[14px] text-[#636363]" htmlFor="check">
Đồng ý với Điều khoản nhận email
</label>
</div>
......@@ -76,106 +72,92 @@ function Footer() {
)}
</div>
</div>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-5">
<h2 className="text-[#063E8E] text-[20px] font-[500]">LIÊN HỆ</h2>
<div className="h-[1px] w-15 bg-[#063e8e]"></div>
<div className="flex flex-col gap-2">
<p className="text-[14px] font-[600] text-[#363636]">
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>
<div className="flex flex-col items-start gap-2">
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]">
<MapPin size={16} className="text-[#124588]" />
<span>171 Võ Thị Sáu, Phường Xuân Hoà, TP. HCM</span>
</div>
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]">
<Phone size={16} className="text-[#124588]" />
<span>+84 28 3932 6598</span>
</div>
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]">
<Printer size={16} className="text-[#124588]" />
<span>+84 28 3932 5472</span>
</div>
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]">
<Mail size={16} className="text-[#124588]" />
<a href="mailto:info@vcci-hcm.org.vn">info@vcci-hcm.org.vn</a>
</div>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5">
<h2 className="text-[#063E8E] text-[20px] font-bold text-left">
LIÊN HỆ
</h2>
<div className="h-0.5 w-14 bg-[#063e8e] mx-0"></div>
<p className="text-[14px] font-semibold text-justify text-[#363636]">
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>
<div className="flex flex-col items-start gap-3">
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]">
<MapPin size={16} className="text-[#124588]" />
<span>171 Võ Thị Sáu, Phường Xuân Hoà, TP. HCM</span>
</div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]">
<Phone size={16} className="text-[#124588]" />
<span>+84 28 3932 6598</span>
</div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]">
<Printer size={16} className="text-[#124588]" />
<span>+84 28 3932 5472</span>
</div>
<div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]">
<Mail size={16} className="text-[#124588]" />
<a href="mailto:info@vcci-hcm.org.vn">
info@vcci-hcm.org.vn
</a>
</div>
</div>
</div>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-5">
<h2 className="text-[#063E8E] text-[20px] font-[500]">KẾT NỐI</h2>
<div className="h-[1px] w-15 bg-[#063e8e]"></div>
<iframe
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"
width="340"
height="130"
style={{ border: "none", overflow: "hidden" }}
scrolling="no"
frameBorder="0"
allowFullScreen={true}
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
></iframe>
<div className="flex gap-3 mt-5">
<a
href="https://www.facebook.com/VCCIHCMC/"
target="_blank"
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition"
>
<Facebook size={21} />
</a>
<a
href="https://twitter.com/VCCI_HCM"
target="_blank"
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition"
>
<Twitter size={21} />
</a>
<a
href="https://www.youtube.com/user/VCCIHCMC"
target="_blank"
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition"
>
<Youtube size={21} />
</a>
<a
href="https://www.linkedin.com/company/vietnam-chamber-of-commerce-and-industry-ho-chi-minh-city-branch-vcci-hcm-?trk=biz-companies-cym"
target="_blank"
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition"
>
<Linkedin size={21} />
</a>
<div className="w-full lg:w-1/3 flex flex-col gap-5 p-3 sm:p-5">
<h2 className="text-[#063E8E] text-[20px] font-bold text-left">
KẾT NỐI
</h2>
<div className="h-[2px] w-14 bg-[#063e8e] mx-0"></div>
<div className="w-full overflow-hidden rounded-md">
<iframe
className="w-full sm:h-[140px]"
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
key={i}
href={s.link}
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"
>
{s.icon}
</a>
))}
</div>
</div>
<div className="z-0 absolute -left-20 -top-30 hidden lg:block">
<Image
className="size-[580px] object-contain"
src={vietnamMap}
alt=""
/>
<div className="z-0 absolute -left-20 -top-20 hidden xl:block">
<Image className="size-[500px] object-contain" src={vietnamMap} alt="" />
<div className="footer-bg-pin" style={{ top: "144px", left: "145px" }}></div>
<div className="footer-bg-pin" style={{ top: "238px", left: "260px" }}></div>
<div className="footer-bg-pin" style={{ top: "342px", left: "162px" }}></div>
<div className="footer-bg-pin" style={{ top: "395px", left: "215px" }}></div>
</div>
{[
{ left: "83px", top: "50px" },
{ left: "230px", top: "175px" },
{ left: "172px", top: "330px" },
{ left: "100px", top: "275px" },
].map((pos, i) => (
<div
key={i}
className="hidden lg:block absolute w-1.5 h-1.5 bg-yellow-400 rounded-full footer-bg-pin footer-bg-pin-vis"
style={{ ...pos }}
/>
))}
</div>
</div>
<div className="bg-[#032248] h-[80px] flex items-center justify-center">
<div className="container w-full p-5">
<p className="text-[14px] text-white">
<div className="bg-[#032248] h-20 flex items-center justify-center">
<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
</p>
</div>
</div>
<style jsx>{`
@keyframes newpulse {
0% {
......@@ -187,23 +169,21 @@ function Footer() {
opacity: 0;
}
}
.footer-bg-pin {
position: absolute; /* chỉnh lại absolute để không bị ảnh hưởng flow */
position: absolute;
z-index: 2;
width: 6px;
height: 6px;
background-color: #facc15; /* màu vàng */
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 center; /* giữ gợn sóng ở tâm */
transform-origin: center;
animation: newpulse 2s infinite ease-in-out;
z-index: -1;
}
......
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