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