Skip to content

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

fix/responsive footer for mobile

parent 5171184a
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 122 deletions
src/app/(main)/_lib/layout/footer.tsx
View file @ e541fc04
"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> <p className="text-[14px] font-semibold text-justify text-[#363636]">
<div className="flex flex-col items-start gap-2"> 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
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]"> </p>
<MapPin size={16} className="text-[#124588]" />
<span>171 Võ Thị Sáu, Phường Xuân Hoà, TP. HCM</span> <div className="flex flex-col items-start gap-3">
</div> <div className="flex items-center gap-2 text-[15px] text-[#363636] font-[500]">
<div className="flex items-center gap-2 text-[16px] text-[#363636] font-[500]"> <MapPin size={16} className="text-[#124588]" />
<Phone size={16} className="text-[#124588]" /> <span>171 Võ Thị Sáu, Phường Xuân Hoà, TP. HCM</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-2 text-[16px] text-[#363636] font-[500]"> <Phone size={16} className="text-[#124588]" />
<Printer size={16} className="text-[#124588]" /> <span>+84 28 3932 6598</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-2 text-[16px] text-[#363636] font-[500]"> <Printer size={16} className="text-[#124588]" />
<Mail size={16} className="text-[#124588]" /> <span>+84 28 3932 5472</span>
<a href="mailto:info@vcci-hcm.org.vn">info@vcci-hcm.org.vn</a> </div>
</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>
</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">
<iframe KẾT NỐI
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" </h2>
width="340" <div className="h-[2px] w-14 bg-[#063e8e] mx-0"></div>
height="130" <div className="w-full overflow-hidden rounded-md">
style={{ border: "none", overflow: "hidden" }} <iframe
scrolling="no" className="w-full sm:h-[140px]"
frameBorder="0" 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"
allowFullScreen={true} style={{ border: "none", overflow: "hidden" }}
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" scrolling="no"
></iframe> frameBorder="0"
<div className="flex gap-3 mt-5"> allowFullScreen={true}
<a allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
href="https://www.facebook.com/VCCIHCMC/" ></iframe>
target="_blank" </div>
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition"
> <div className="flex gap-3 justify-start">
<Facebook size={21} /> {[
</a> { icon: <Facebook size={20} />, link: "https://www.facebook.com/VCCIHCMC/" },
<a { icon: <Twitter size={20} />, link: "https://twitter.com/VCCI_HCM" },
href="https://twitter.com/VCCI_HCM" { icon: <Youtube size={20} />, link: "https://www.youtube.com/user/VCCIHCMC" },
target="_blank" { 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" },
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition" ].map((s, i) => (
> <a
<Twitter size={21} /> key={i}
</a> href={s.link}
<a target="_blank"
href="https://www.youtube.com/user/VCCIHCMC" 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"
target="_blank" >
className=" h-[42px] w-[42px] bg-[#124588] text-white rounded-full flex items-center justify-center hover:opacity-90 transition" {s.icon}
> </a>
<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> </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